I have react component with select tag, which is rendered for any item in array (if one value in array, then one select will be on the page, 2 values = select tags), select receive onChange method, and when i changing something in first it's also change the same for every select element.
How I can apply onChange for a specific element and not for all elements?
My code is below:
options: [
{name: "Change status", value:["Available", "Not Available", "Vacation"]}
]
}
class App extends Component {
constructor(props) {
super(props);
this.state = {
firstname: '',
lastname: '',
status: 'Available',
newstatus: 'Not Available',
hits: [],
isLoading: false,
error: null,
};
this.onChange = this.onChange.bind(this)
this.handleSubmit = this.handleSubmit.bind(this)
this.loadoptions = this.loadoptions.bind(this)
}
onChange (e) {
this.setState({ [e.target.name]: e.target.value });
}
loadoptions = () => {
const OptionsArray = []
let OptionsData = optionsArray.options
OptionsData.forEach((val, index) => {
let OptionsDatavalue = val.value
OptionsArray.push(
<FormControl>
<InputLabel htmlFor="controlled-open-select">{val.status}</InputLabel>
<Select
key={index}
name="newstatus"
value={this.state[val.name] ? this.state[val.name] : ""}
onChange={this.onChange}
inputProps={{ name: val.name }}
>
{OptionsDatavalue.map(option => (
<MenuItem key={option} value={option}>
{option}
</MenuItem>
))}
</Select>
</FormControl>
);
});
return OptionsArray;
};
In render i run:
<form autoComplete="off" className="new_status">
<FormControl>{this.loadoptions()}</FormControl>
</form>
As per your code. You have a problem in giving the name to a select.
<Select
key={index}
name="newstatus" {// shoule be diffrent for each tag}
value={this.state[val.name] ? this.state[val.name] : ""}
onChange={this.onChange}
inputProps={{ name: val.name }}
>
You can use simply use an Object for options inside the state to make it work.
this.state = {
options: {
change_status1: "Vacation",
change_status2: "Not Available"
}
};
onChange = e => {
let options = this.state.options;
options[e.target.name] = e.target.value;
this.setState({ options }, () => {
console.log("newState", options);
});
};
loadoptions = () => {
const OptionsArray = [];
let OptionsData = _options;
let stateOptions = this.state.options;
OptionsData.forEach((val, index) => {
let OptionsDatavalue = val.value;
let selectName = val.name.split(" ").join("_").toLowerCase();
OptionsArray.push(
<div key={index}>
<label>Select {val.name} </label>
<select
key={index}
name={selectName}
defaultValue={
stateOptions[selectName] ? stateOptions[selectName] : ""
}
onChange={this.onChange}
>
{OptionsDatavalue.map(option => (
<option key={option} value={option}>
{option}
</option>
))}
</select>
</div>
);
});
return OptionsArray;
};
render() {
return <div className="App">{this.loadoptions()}</div>;
}
Here is the fiddle.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.