在状态

Question

这是我的反应组件

class MyComponent extends React.Component{

  constructor(props){
    super(props);
  }

  onChangeInput(event){
    this.state.value=event.target.value;
  }
  
  render(){
    <div>
      <input onChange={this.onChangeInput.bind(this)} value=
      {this.state.value}/>
    </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

问题是你试图改变状态对象而不是设置它。这确实会更改状态对象，但不会触发渲染，因此您的内容不会更新。尝试使用setState函数设置状态，这将触发反应渲染。

其次，由于您遵循ES6语法，您可以直接在构造函数中绑定您的函数。这将避免每个渲染的函数绑定。

尝试以下内容，它应该可以。

class MyComponent extends React.Component{

  constructor(){
    super();        
    this.onChangeInput = this.onChangeInput.bind(this);
  }

  onChangeInput(event){
     this.setState({
       value: event.target.value
     });
  }
       
  render() {
    return (
      <div>
        <input onChange={this.onChangeInput} value={this.state.value}/>
     </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 2

您的onChangeInput应如下所示：

 onChangeInput(event){
    this.setState({
    value: event.target.value
 });
 }

这不会改变当前的state对象，也会触发render方法。