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

Question

当我注意到受控表单元素的行为时，我是 React 的新手并且正在试验。我有一个受控输入元素，其值绑定到父组件的状态，其 onChange 处理程序从用户那里获取输入的值并更新状态。因此，每次用户键入内容时，输入值都会反映出变化。这是理想的效果。在渲染函数中创建输入时效果很好。但是在 case 中，输入是通过在构造函数中设置的 class 变量初始化的，当状态改变时，相同的输入不会更新它的值。唯一的区别是首先初始化输入元素的地方。什么会导致这种行为？感谢您的帮助！

下面是导致错误行为的代码示例：

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>

Answer 1

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

您需要将 this.input 定义为返回 <input> 的函数，如下所示：

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

并在渲染中调用 this.input()。现在，输入将在每次渲染时更新。

但是，如果您想要的只是创建对输入的引用 (this.input)，我宁愿建议在渲染中使用 the special prop ref:

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

这样做时，您不需要在构造函数中将 this.input 定义为函数。

Answer 2

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

参考react constructor

props/state 更改时调用的函数是

componentWillReceiveProps()
shouldComponentUpdate()
componentWillUpdate()
渲染()
componentDidUpdate()

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

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

阅读更多关于 refs

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

Render method does not re-render element initialized in the constructor

javascript

constructor

render

ecmascript-6

reactjs