I am quite new to React and after going through some tutorials, I was trying the below code of mine.
I made one component, passed props to it from a store, on componentWillMount I make a new state for component. Rendering is fine till now.
Next I bound my state to value of an input box and I have onChange listener as well. Still, I can't change my values in the field.
Since, I am from Angular background, I am assuming binding input's value to state like below will automatically update the property name in state object. Am I wrong here?
componentWillMount(){
this.setState({
updatable : false,
name : this.props.name,
status : this.props.status
});
}
//relevant DOM from component's render function
<input className="form-control" type="text" value={this.state.name} id={'todoName' + this.props.id} onChange={this.onTodoChange.bind(this)}/>
onTodoChange(){
console.log(this);
//consoling 'this' here, shows old values only.
//not sure how and even if I need to update state here.
// Do I need to pass new state to this function from DOM
//TODO: send new data to store
}
My onTodoChange function console the value of this which has same value of state as while initializing. How do I go about changing state by typing in input boxes, so that I can send them to the stores?
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
};
}
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 })}/>
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});
}