渲染方法不会重新渲染在构造函数中初始化的元素。

Question

我是 React 的新手，在尝试实验时注意到了受控表单元素的一种行为。我有一个受控输入元素，其值绑定到父组件的状态上，其 onChange 处理程序接收用户键入的值并更新该状态。所以每次用户键入内容时，输入值都会反映出变化。这是期望的效果。当输入在渲染函数中创建时，它的工作很出色。但是，如果输入是通过在构造函数中设置的类变量进行初始化的，当状态改变时，同一输入不能更新其值。唯一的区别在于输入元素最初的初始化位置。什么会导致这样的行为？ 感谢任何帮助！

以下是可能导致错误行为的代码示例：

class App extends React.Component {
  
  constructor(props){
    super(props);
    this.state = {
      val : '',
    }
    this.handleChange = this.handleChange.bind(this);
    this.input = (
    <input type="text" 
           onChange={this.handleChange } 
           value={this.state.val} />
    );
  }
  
  handleChange(e){
   this.setState({val:e.target.value});
  }
  render() {

    return (
      <div className="App">  
        { this.input ? this.input : null }                
      </div>
    );
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

- mjs

---

这个问题将帮助您理解为什么它会表现出这样的行为。https://dev59.com/tl4b5IYBdhLWcg3wdxnG - Suresh Ponnukalai

Answer 1

React组件的构造函数仅在挂载之前调用。如果您在构造函数中定义了某些变量，它将存储其值而不是引用，并且不会重新渲染。

请参考React构造函数。

在props/state更改时调用的函数为

• componentWillReceiveProps()
• shouldComponentUpdate()
• componentWillUpdate()
• render()
• componentDidUpdate()

如果您想要存储任何元素的引用，则可以使用refs。

render() {
  <input type="text" 
    onChange={this.handleChange } 
    value={this.state.val}
    ref={ ele => (this.input = ele)} 
  />
}

阅读更多关于refs的内容

- Sakshi Nagpal

Answer 2

您已经将输入存储（或缓存）到渲染外部的变量中。因此，当组件更新时，它只会一遍又一遍地呈现缓存版本的输入。

您需要将this.input定义为返回<input>的函数，就像这样：

this.input = () => (
    <input type="text" 
       onChange={this.handleChange } 
       value={this.state.val} />
);

在渲染中调用this.input()。现在，每次渲染都会更新输入内容。

然而，如果您只想创建一个对输入的引用(this.input)，我更建议使用特殊属性ref在渲染内部创建这个引用，具体请参见文档说明:

render() {
  <input type="text" 
    onChange={this.handleChange } 
    value={this.state.val}
    ref={input => (this.input = input)}  // the magic happens here
  />
}

这样做的话，你不需要在构造函数中将this.input定义为一个函数。

- GG.