Reactjs / MaterialUI 3：选择进入表行

Question

我正在使用Reactjs和MaterialIU v.3 （记住v3不是v4） ，我正在尝试使用PS D:\Python> ${env:DEBUGPY_LAUNCHER_PORT}='50194'; & 'C:\Users\yyy\AppData\Local\Programs\Python\Python37\python.exe' 'c:\Users\yyy\.vscode\extensions\ms-python.python-2020.3.71659\pythonFiles\lib\python\debugpy\wheels\debugpy\launcher' 'd:\Python\Projects\Delimiter\delimiter_parser.py' Traceback (most recent call last): File "C:\Users\yyy\AppData\Local\Programs\Python\Python37\lib\runpy.py", line 193, in _run_module_as_main "__main__", mod_spec) File "C:\Users\yyy\AppData\Local\Programs\Python\Python37\lib\runpy.py", line 85, in _run_code exec(code, run_globals) File "c:\Users\yyy\.vscode\extensions\ms-python.python-2020.3.71659\pythonFiles\lib\python\debugpy\wheels\debugpy\launcher\__main__.py", line 86, in <module> main() File "c:\Users\yyy\.vscode\extensions\ms-python.python-2020.3.71659\pythonFiles\lib\python\debugpy\wheels\debugpy\launcher\__main__.py", line 42, in main launcher.connect(launcher_port) File "c:\Users\yyy\.vscode\extensions\ms-python.python-2020.3.71659\pythonFiles\lib\python\debugpy\wheels\debugpy\launcher/../..\debugpy\launcher\__init__.py", line 27, in connect sock.connect(("127.0.0.1", launcher_port)) ConnectionRefusedError: [WinError 10061] No connection could be made because the target machine actively refused it 来实现表的构建并在[array].map内渲染Select，期望为每种服务（午餐，小吃，交通）分别定义一个特定的百分比，但是当我更改任何人时，所选的百分比都会改变选择器。有谁知道实现该方法的想法。

代码和图片：

TableCell

我的函数<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

图片：

谢谢你。

Answer 1

您不能像使用一个单一的status值那样实现它。

使其成为对象或数组。

您可以在处理程序函数中将身份索引作为参数传递。

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

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>