Reason is you are controlling all the Selectfield by a single state value, so when you are changing that state value, it is doing the changes in all the Selectfields.
Solution:
Instead of using a single state use array, on value of each Selectfield, and update only specific value not all the values.
Step 1: Define month as an array in constructor:
constructor(){
super();
this.state = {month: []}
}
Step 2: Use specific value (one value for each field) for Selectefields:
<SelectField
value={this.state.month[index] || null}
....
Step 3: Pass index of each SelectField in onChange function to update the specific value of array:
<SelectField
....
onChange={this.handleMonth.bind(this, index)}>
{months}
</SelectField>
Step 4: Update the specific value in onChange function:
handleMonth(index, value){
let month = [...this.state.month]; //or this.state.month.slice(0)
month[index] = value;
this.setState({ month });
}
Full Code:
class Month extends Component {
constructor(){
super();
this.state = {
month: []
}
}
handleMonth(index, value){
let month = [...this.state.month];
month[index] = value;
this.setState({ month });
}
render() {
return(
<Table selectable={false}>
....
<SelectField
value={this.state.month[index] || null}
onChange={this.handleMonth.bind(this, index)}>
{months}
</SelectField>
....
</Table>
)
}
}
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…