Reactjs / MaterialUI 3: выбрать в строку таблицы

Question

Я использую Reactjs и MaterialIU v.3 (помните, v3, а не v4) , я пытаюсь реализовать Таблицу, используя [array].map для ее построения, и рендеринг Select внутри TableCell, ожидая определить определенный c процент отдельно для каждой услуги (обед, перекус, транспорт), но когда я менял кого-либо, выбранный процент меняет весь селектор. У кого-нибудь есть идея для достижения этого подхода.

Коды и изображения:

<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>