反应设置输入的值

Posted 2023-02-24

【中文标题】反应设置输入的值

【英文标题】：React setting input's value

【发布时间】：2016-04-01 15:22:28

【问题描述】：

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

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

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

在 Input Component 上，onEvent 可以是 ==> onChange, onBlur...：

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

InputComponent 的句柄输入：

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

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

只要事件触发，输入的值就不是 InputComponent 的当前值。它是在父级上设置为该值的值。

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

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

提前致谢。

【问题讨论】：

是的，同样，我刚刚发现，每当我尝试在设置时记录状态值时，它都会返回初始值。为什么会这样？我下载了 React 调试器并将状态设置为正确的值。谢谢！

【参考方案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