React设置输入's值

React setting input's value

本文关键字：设置 输入 React      更新时间：2023-10-26

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

在父级将道具传递给输入组件时，handleInputText设置anyValue:的状态

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

在输入组件上，onEvent可以是===>onChange、onBlur…：

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

输入组件的句柄输入：

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

现在，我的发现是，当父母在设置状态时起作用时，我试图记录它，它记录初始值。以下是一些初步结论：

  1. 每当事件触发时，输入的值都不是InputComponent的当前值。它是在该值的父对象上设置的值。

  2. 输入的值和this.props.textValue在事件的第二次触发时都匹配。

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

提前谢谢。

您可以在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

相关文章：