Why can't I change my input value in React even with the onChange listener
Solution 1:
Unlike in the case of Angular, in React.js you need to update the state manually. You can do something like this:
<input
id={'todoName' + this.props.id}
className="form-control"
type="text"
value={this.state.name}
onChange={e => this.onTodoChange(e.target.value)}
/>
And then in the function:
onTodoChange(value){
this.setState({
name: value
});
}
Also, you can set the initial state in the constructor of the component:
constructor (props) {
super(props);
this.state = {
updatable: false,
name: props.name,
status: props.status
};
}
Solution 2:
You can do shortcut via inline function if you want to simply change the state variable without declaring a new function at top:
<input type="text" onChange={e => this.setState({ text: e.target.value })}/>
Solution 3:
I think it is best way for you.
You should add this: this.onTodoChange = this.onTodoChange.bind(this)
.
And your function has event param(e)
, and get value:
componentWillMount(){
this.setState({
updatable : false,
name : this.props.name,
status : this.props.status
});
this.onTodoChange = this.onTodoChange.bind(this)
}
<input className="form-control" type="text" value={this.state.name} id={'todoName' + this.props.id} onChange={this.onTodoChange}/>
onTodoChange(e){
const {name, value} = e.target;
this.setState({[name]: value});
}
Solution 4:
If you would like to handle multiple inputs with one handler take a look at my approach where I'm using computed property
to get value of the input based on it's name.
import React, { useState } from "react";
import "./style.css";
export default function App() {
const [state, setState] = useState({
name: "John Doe",
email: "[email protected]"
});
// We need to spread the previous state and change the one we're targeting, so other data cannot be lost.
const handleChange = e => {
setState(prevState => {
...prevState,
[e.target.name]: e.target.value,
});
};
return (
<div>
<input
type="text"
className="name"
name="name"
value={state.name}
onChange={handleChange}
/>
<input
type="text"
className="email"
name="email"
value={state.email}
onChange={handleChange}
/>
</div>
);
}