如果页面上有很多,如何更改 1 select 的值。我在表 col 中有 8 个选择,每个选择都必须单独更改。我不明白如何分别为每个人做到这一点。当我选择意见时,所有选择都会更改值。
import React, { Component } from "react";
import MenuItem from "@material-ui/core/MenuItem";
import FormControl from "@material-ui/core/FormControl";
import Select from "@material-ui/core/Select";
export default class Demo extends Component {
state = {
productTaxes: [
{ label: "Tax 8%", value: 10 },
{ label: "Tax 23%", value: 11 }
],
selected: "10",
};
handleSelect = (e, key, type) => {
this.setState({
selected: e.target.value
});
};
render() {
return (
<div>
<FormControl>
<Select
name={1}
value={10}
onChange={e => this.handleSelect(e, "tax")}
>
{this.state.productTaxes.map((tax, i) => {
return (
<MenuItem key={i} value={tax.value}>
{tax.label}
</MenuItem>
);
})}
</Select>
</FormControl>
<FormControl>
<Select
name={2}
value={this.state.selected}
onChange={e => this.handleSelect(e, "tax")}
>
{this.state.productTaxes.map(tax => {
return (
<MenuItem key={`tax${tax.value}`} value={tax.value}>
{tax.label}
</MenuItem>
);
})}
</Select>
</FormControl>
</div>
);
}
}
每个选择都需要单独的状态。您可以使用name
来自select
,的属性
<Select
name="select1"
value={this.state.select1}
onChange={e => this.handleSelect(e, "tax")}
>
{this.state.productTaxes.map((tax, i) => {
return (
<MenuItem key={i} value={tax.value}>
{tax.label}
</MenuItem>
);
})}
</Select>
您可以对所有选择执行相同的方法。
你的handleSelect
功能应该是,
handleSelect = (e, key, type) => {
this.setState({
[e.target.name]: e.target.value
});
};
注意:避免对 使用数字name
,这不是一个好习惯。使用更具体的字符串名称。
另一件事是,除非必要,否则不要向函数传递额外的参数,
onChange={e => this.handleSelect(e, "tax")}
这可以简化为,
onChange={this.handleSelect}
你的功能可以是,
handleSelect = (e) => { ... }
也不要重复代码。如果你觉得代码被重复了,那么你总是可以将该部分分配给一个变量并改用该变量,
render(){
const options = this.state.productTaxes.map((tax, i) => {
return (
<MenuItem key={i} value={tax.value}>
{tax.label}
</MenuItem>
);
});
return(
...
<Select
name="select1"
value={this.state.select1}
onChange={e => this.handleSelect(e, "tax")}
>
{options}
</Select>
...
)
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句