更改子输入时不刷新Reactjs父状态答案

【问题标题】：Reactjs parent state is not refreshed when the children input is changed更改子输入时不刷新Reactjs父状态
【发布时间】：2019-05-31 17:24:53
【问题描述】：

我创建了一个组件，想要包装文本输入并为其添加一些功能。

<Input value={this.state.name} />

在子组件中，文本输入旁边有一个删除按钮，以便在单击时清除文本。

  const Input = (props) => {
    let textInput = null;
      const removeText = (e) =>{
        e.preventDefault();
        textInput.value = '';
        textInput.focus();
      }
       return(<div>
              <input ref={(input) => { textInput = input; }} {...props} />
              <button
                  onClick = {removeText}
               ></button>
              </div>)
    }

由于 Input 组件是函数，我使用 ref 来访问输入并对其进行操作。问题是父状态在被子组件中的函数更改时不会更新。考虑到我不想使用道具并传递函数来更新父状态。顺便说一句，我不知道这种方法是否正确。

【问题讨论】：

这不是要走的路。当您将 value 传递给 input 时，您创建了一个受控组件 (reactjs.org/docs/forms.html#controlled-components)。您必须通过在某处调用setState 来更新父状态，因此您需要onChange。请记住，React 只写入 DOM 而从不读取它。
@LucaFabbri 高阶组件能来帮忙吗？我不想在父组件中编写方法来更新其状态，因为我在很多地方都使用了 Input 组件。
不，HOC 无济于事。在你的 Input 组件中有一个 onChange 函数 props 不会删除它的重用：你仍然可以在许多地方使用 Input ，但调用者组件将在每次使用时传递不同的函数。

标签： reactjs

【解决方案1】：

在调用 Input 组件的组件中定义 removeText 函数。还要避免将 refs 用于输入字段，您肯定不需要 ref，而是可以使用事件处理函数来设置 state 中的值

      removeText = (e) =>{
           e.preventDefault();
           this.setState({name: ''});
      }

     handleInput = e => {
         this.setState({name: e.target.value});
     }

并将函数作为道具传递给 Input 组件

    <Input value={this.state.name} removeText={this.removeText} handleInput={this.handleInput} />

现在，将 Input 组件更改为如下所示

   const Input = (props) => {
        return(<div>
          <input value={props.value} onChange={e => props.handleInput(e)}/>
          <button
              onClick = {() => this.removeText()}
           ></button>
          </div>)
   }

这样它会更新父状态值。这就是 react 中所谓的回调

【讨论】：