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

Question

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

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

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

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

引用react constructor

在 Prop /状态变化时调用的函数是

• componentWillReceiveProps()
• shouldComponentUpdate()
• componentWillUpdate()
• 呈现()
• componentDidUpdate()

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

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

阅读更多关于 refs 的信息