Question

我尝试更新文本输入，但它似乎无法正常工作。

这是我的简化示例：

  var Message = React.createClass({

  getInitialState: function() {
    return {textValue: ''};
  },

  render: function() {
    return (
      <View style={[styles.container]}>
        <ProfilePicture userId={this.props.userId}/>
        <TextInput
          ref={component => this._textInput = component}
          style={{flex: 8, paddingLeft: 5, fontSize: 15}}
          onChangeText={this._handleChange} 
          //multiline={true}
          defaultValue={""}
          value={this.state.textValue}
          returnKeyType={"send"}
          blurOnSubmit={false}
          autoFocus={true}
          enablesReturnKeyAutomatically={true}
          onSubmitEditing={this._onSubmit}
        />
      </View>
    ); 
  },

  _handleChange: function(text) {
    this.setState({textValue: "foo"});
  },

  _onSubmit: function(event) {
    this._clearText();
  },

  _clearText: function() {
    this._textInput.setNativeProps({text: ''});
  },

});

我希望只要有人输入某些文字，它就会自动更改为阅读＆＃34; foo＆＃34;但这不起作用。

有什么想法吗？

更新

情节变浓，

如果我为onBlur调用相同的函数，它只能在文本输入中没有文本的情况下工作。如果我更改函数以使用this._textInput.setNativeProps({text: 'foo'});而不是this.setState({textValue: "foo"});设置值，那么当文本输入为空且有数据时，它都可以工作。

示例：

render: function() {
  return (
    <TextInput
      ref={component => this._textInput = component}
      style={{flex: 8, paddingLeft: 5, fontSize: 15}}
      onChangeText={this._handleChange} 
      onBlur={this._handleChange}
      //multiline={true}
      defaultValue={""}
      value={this.state.textValue}
      returnKeyType={"send"}
      blurOnSubmit={false}
      autoFocus={true}
      enablesReturnKeyAutomatically={true}
      onSubmitEditing={this._onSubmit}
    />
    ); 
},

_handleChange: function(text) {
  // what to do here check if there are youtube videos?
  this._textInput.setNativeProps({text: 'foo'});
}

因此，在上面，_handleChange适用于onBlur，但不适用于onChangeText。奇怪吧？

Answer 1

不是最佳解决方案，但查看react-native v 0.17.0的react本机代码，看起来在onChange期间对组件值的任何更改都不会生效。

HEAD上的代码已经更改，这可以修复它。 https://github.com/facebook/react-native/blob/master/Libraries/Components/TextInput/TextInput.js#L542

为了解决这个问题，你可以包装代码来重置setTimeout中的文本输入值，就像这样

var self = this;
setTimeout(function() {self._textInput.setNativeProps({text: newText}); }, 1);

这会在当前更改事件之外创建一个新的更改。

就像我说的不是最佳解决方案但它有效。

如果新文本大于旧文本，则还有另一个问题是光标位置需要更新，这在主服务器上尚未提供但是有一个PR似乎已接近合并。 https://github.com/facebook/react-native/pull/2668

Answer 2

您需要将onChangeText绑定到此。如果没有_handleChange函数＆＃34;这个＆＃34;没有引用组件，因此setState不会像你期望的那样工作。

<TextInput
    ref={component => this._textInput = component}
    style={{flex: 8, paddingLeft: 5, fontSize: 15}}
    onChangeText={this._handleChange.bind(this)} // <-- Notice the .bind(this)
    //multiline={true}
    defaultValue={""}
    value={this.state.textValue}
    returnKeyType={"send"}
    blurOnSubmit={false}
    autoFocus={true}
    enablesReturnKeyAutomatically={true}
    onSubmitEditing={this._onSubmit}
/>

如何在更改时更新文本输入

2 个答案: