Question

我正在使用ReactJs中的表单，并且我使用来自state的值填充输入字段。但我的输入字段是以只读方式创建的。即使我设置了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

原因是您使用状态变量来存储文本字段值，但是您没有更新onChange事件的值，因为您的文本字段是只读的，请尝试：

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

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

Answer 2

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

的示例

＆＃13;

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'));

＆＃13;

<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>

＆＃13;

React onChange set但输入仍为只读

2 个答案: