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

Question

I am working on form in ReactJs and I am populating the input field with value from state. But my input field is being created as readonly. Even though I set the onChange function.

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}/>
   );
}

I do not understand this behavior. Can someone please explain? Thank you

Answer 1

Reason is you are using a state variable to store the text field value, but you are not updating the value on onChange event, because of that your text field is read only, Try this:

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

To change the state of a component in React, you will need to use this.setState . After you call that method, the component will be re-rendered with the new data you've set. Here's your example using 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> 

Answer 3

incase if you are using functional based components, then you can solve this problem by using useState hook this way

import {useState} from "react";
export default Example = (props) =>{
   let [text, setText] = useState(props.value)
   function update(e){
      setText(e.current.value);
      // here you can add whatever additional functionality that you want to add.
      props.value = e.current.value; 
   }

   return (
      <><input type="text" value={text} onChange={update} /></>
   )
}

useState just makes it to re-render it.