如何在输入字段中以状态存储对象?

问题描述 投票:1回答:2

我正在尝试获取两个输入值,将其保存为状态,但仅占用最后一个输入字段值。

当使用useEffect console.log(state)时,该对象仅存储并显示最后的值lname,我无法理解为什么它不存储fname

我想将两个值都存储为输入字段中的对象。

const handleChange = idx => e => {
    const { name, value } = e.target;
    const rows = [...state.rows];
    rows[idx] = {
      ...rows[idx]
      [name]: value
    };
    setState({
      rows
    });
  };
reactjs react-hooks
2个回答
2
投票

您需要在handleChange中使用...rows[idx]

const handleChange = idx => e => {
    const { name, value } = e.target;
    const rows = [...state.rows];
    rows[idx] = { ...rows[idx], [name]: value }; //here
    setState({
      rows
    });
  };

1
投票

问题出在handleChange上,您覆盖了已更改的状态:

const handleChange = (idx) => (e) => {
  const { name, value } = e.target;
  const rows = [...state.rows];
  // Add ...rows[idx] to keep the values updated from other names
  rows[idx] = { ...rows[idx], [name]: value };
  setState({ rows });
};

Edit gallant-elgamal-5bq21

© www.soinside.com 2019 - 2024. All rights reserved.