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

Posted 2023-02-21

【中文标题】更改子输入时不刷新Reactjs父状态

【英文标题】：Reactjs parent state is not refreshed when the children input is changed

【发布时间】：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 ，但调用者组件将在每次使用时传递不同的函数。

【参考方案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 中所谓的回调