Question

我在很多关于管理输入值的React教程中都看到过。以下模式：

在Parent将props传递给Input Component时，handleInputText设置anyValue的状态：

<InputComponent textValue={this.state.anyValue} onInputtingText={this.handleInputText}/>

在输入组件上，onEvent可以是==＆gt; onChange，onBlur ......：

<input type='text' ref='inputRef' value={this.props.textValue} onEvent={this.handleInput}/>

InputComponent的handleInput：

handleInput(){
  this.setState(this.refs.inputRef.value)
}

现在我的调查结果，当父母在设置状态时起作用并尝试记录初始值时，我会尝试记录它。这是一些初步的结论：

每当一个事件触发时，输入的值不是InputComponent的当前值。它是该值的父级上设置的值。
输入的值和this.props.textValue在第二次触发事件时匹配。

我的问题是，你如何处理这种反应方式？或者你必须在handleInput函数中检查这个吗？

提前致谢。

Answer 1

您可以在this.handleInputText中设置状态，并在InputComponent，

中调用它

var App = React.createClass({
  getInitialState() {
    return { anyValue: '' };
  },

  handleInputtingText(value) {
    this.setState({ anyValue: value });
  },

  render() {
    return <div>
      <p>{ this.state.anyValue }</p>
      <InputComponent 
        textValue={ this.state.anyValue } 
        onInputtingText={ this.handleInputtingText } 
      />
    </div>
  }
});

var InputComponent = React.createClass({
  handleInput(e) {
    this.props.onInputtingText(e.target.value);
  },

  render: function() {
    return <input 
      type="text" 
      value={this.props.textValue} 
      onChange={ this.handleInput } 
    />;
  }
});

Example

反应设置输入的值

1 个答案: