Reactjs / MaterialUI 3：选择表格行

Question

我正在使用 Reactjs 和 MaterialIU v.3 （记住 v3 不是 v4），我正在尝试使用 [array].map 来实现一个表来构建它，并在TableCell 内渲染Select，期望为每个服务（午餐、小吃、交通）分别定义一个特定的百分比，但是当我更改任何人时，所选百分比会更改所有选择器。任何人都有实现该方法的想法。

代码和图片：

<Table className={classes.table}>
                        <TableHead>
                          <TableRow>
                            <TableCell>Code</TableCell>
                            <TableCell>Name</TableCell>
                            <TableCell>Value</TableCell>
                            <TableCell>Perc.</TableCell>
                          </TableRow>
                        </TableHead>
                        <TableBody>
                          {this.state.fees_details.map((item, key) => {
                            return (
                              <TableRow key={key}>

                                <TableCell>
                                  {item.ItemCode}
                                </TableCell>
                                <TableCell>
                                  {item.Dscription}
                                </TableCell>
                                <TableCell>
                                  {item.Price}
                                </TableCell>
                                <TableCell>
                                  <Select
                                    value={this.state.percentControl}
                                    onChange={this.selectItemOnChange}
                                    inputProps={{
                                      name: item.ItemCode,
                                      id: item.ItemCode
                                    }}>

                                    <MenuItem value={0}>0%</MenuItem>
                                    <MenuItem value={10}>10%</MenuItem>
                                    <MenuItem value={20}>20%</MenuItem>
                                    <MenuItem value={30}>30%</MenuItem>
                                    <MenuItem value={40}>40%</MenuItem>
                                    <MenuItem value={50}>50%</MenuItem>
                                    <MenuItem value={60}>60%</MenuItem>
                                    <MenuItem value={70}>70%</MenuItem>
                                    <MenuItem value={80}>80%</MenuItem>
                                    <MenuItem value={90}>90%</MenuItem>
                                    <MenuItem value={100}>100%</MenuItem>
                                  </Select>
                                </TableCell>

                              </TableRow>
                            ) })}
                        </TableBody>

而我的函数selectItemOnChange定义是：

selectItemOnChange(e) {
    console.log(e)
    if (e.target.name === '0024') {
      console.log(e.target.value)
      this.setState({
        percentControl: e.target.value
      })
    }
    if (e.target.name === '0025') {
      console.log(e.target.value)
      this.setState({
        percentControl: e.target.value
      }) 
    }
    if (e.target.name === '0027') {
      console.log(e.target.value)
      this.setState({
        percentControl: e.target.value
      }) 
    }
  }

图片：

先谢谢你了。

Answer 1

你不能像使用一个单一的状态值一样实现它。

将其设为对象或数组。

您可以在处理函数中将标识索引作为参数传递。

下面是一个可重复的最小示例，您可以参考

const list = [...Array(10).keys()].map(x => ({ id: x, ItemCode: x }));
const App = () => {
  const [selected, setSelected] = React.useState(list);
  const onChangeHandler = id => e => {
    setSelected([
      ...selected.filter(x => x.id !== id),
      { id: id, ItemCode: e.target.value }
    ]);
  };
  return (
    <div className="App">
      {list.map(item => (
        <select
          key={item.id}
          value={selected.find(x => x.id === item.id).ItemCode}
          onChange={onChangeHandler(item.id)}
        >
          <option value={0}>0%</option>
          <option value={1}>10%</option>
          <option value={2}>20%</option>
          <option value={3}>30%</option>
        </select>
      ))}
      <br />
    </div>
  );
};
ReactDOM.render(<App />, document.getElementById("root"));

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.12.0/umd/react-dom.production.min.js"></script>