React onChange 设置但输入仍然是只读的

Question

我正在 ReactJs 中处理表单，并使用状态值填充输入字段。但我的输入字段被创建为只读。即使我设置了 onChange 函数。

handleNameChange(event) {
   myEvent.name = event.target.value;
}       

render(){
   return(  
       <input type="text" id="eventName" className="form-control" onChange={this.handleNameChange.bind(this)} value={this.state.name}/>
   );
}

我不理解这种行为。有人可以解释一下吗？谢谢

Answer 1

要更改 React 中组件的状态，您需要使用this.setState. 调用该方法后，组件将使用您设置的新数据重新呈现。这是您使用的示例setState：

class Example extends React.Component {
  constructor() {
    super();
    this.state = { name: 'Harambe' };
    this.handleNameChange = this.handleNameChange.bind(this);
  }

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

  render() {
    console.log(this.state);
    return(  
      <input type="text" id="eventName" className="form-control" onChange={this.handleNameChange} value={this.state.name}/>
    );
  }
}

ReactDOM.render(<Example/>, document.getElementById('View'));

<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>
<div id="View"></div>