сопоставление через входные данные и setstate onchange

#javascript #reactjs #ecmascript-6 #react-hooks

#javascript #reactjs #ecmascript-6 #реагирующие хуки

Вопрос:

Я пытаюсь вернуть несколько текстовых входных данных на основе данных в приведенном ниже состоянии (placementData), а затем обработать обновление их соответствующего состояния с помощью одного обработчика onChange.

Я могу с комфортом сопоставлять и возвращать входные данные и их заполнители, значения и т.д., Но я застрял в том, как выполнить 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));
  };
  

Кто-нибудь знает, как я могу это выполнить?

Комментарии:

1. В чем ошибка?

Ответ №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);
  };