Question

我试图基于以下状态（placementData）中的数据返回多个文本输入，然后使用单个onChange处理程序来处理更新其各自状态的操作。

我可以轻松地.map并返回输入及其占位符，值等，但是我对如何执行onChange感到困惑。

我真的不想分别更新每个人/

  const [placementData, setPlacementData] = useState([
    { key: 1, position: 'Long side panel', value: 10 },
    { key: 2, position: 'Custom wrap', value: 0 },
    { key: 3, position: 'Seatback', value: 0 },
    { key: 4, position: 'Full wrap', value: 20 },
    { key: 5, position: 'Driver’s cabin', value: 0 },
    { key: 6, position: 'Stop side panel', value: 0 },
    { key: 7, position: 'Max Parade', value: 60 },
    { key: 8, position: 'Parade', value: 0 },
    { key: 9, position: 'Full rear', value: 70 },
    { key: 10, position: 'Rear panel', value: 0 },
  ]);

这是我当前的无效解决方案：

  const handleInputChange = (e, index) => {
    const { name, value } = e.target;
    const list = [...placementData];
    list[index][name] = value;
    setPlacementData(list);
  };

return (
  <div>
              <h4>Add Campaign Placements</h4>
              <Row>
                {placementData.map((key, i) => (
                  <Col xs={6} md={6} lg={3} key={key.position}>
                    <TextField
                      label={key.position}
                      name={key.position}
                      value={key.value}
                      // defaultValue={selected[0].company}
                      variant="outlined"
                      // onChange={handleInputChange}
                      onChange={(e) => handleInputChange(e, key, i)}
                      InputProps={
                        {
                          // readOnly: isReadOnly,
                        }
                      }
                    />
                  </Col>
                ))}
              </Row>
            </div>

我也尝试过：

  // const handleInputChange = (event) => {
  //   const { value } = event.target;
  //   setPlacementData({
  //     ...placementData,
  //     [event.target.name]: value,
  //   });
  // };

和


  const handleInputChange = (event, idx) => {
    setPlacementData(() => placementData.map((item, i) => i.value));
  };

有人知道我该怎么完成吗？

Answer 1

handleInputChange(e, key, i)是您调用处理程序的方式，但是处理程序的签名是(e, index)。因此，您将在应该传递索引的位置传递密钥。

将您的处理程序更新为此，我认为您应该很好。

 const handleInputChange = (e, index) => {
    const { name, value } = e.target;
    const list = [...placementData];

    // it's an array element, not a keyed map/object, 
    // so have to recreate the entire element
    list[index] = { ...list[index], value };
    setPlacementData(list);
  };

通过输入和setstate onchange进行映射

1 个答案: