时间戳

首页 > 解决方案 > React 在状态对象数组中设置多个输入

reactjs - React 在状态对象数组中设置多个输入

问题描述

我不确定是否可以在我的 React 应用程序中<form>使用以下输入字段：

<TextField />
<TextField />
<TextField />

我有一个状态

const [info, setInfo] = useState({
    firstName:"", 
    lastName:"",
    colors:[]
})

我知道如何使用 ES6 Spread like 设置单个字段setInfo(...info, firstName:e.target.value)，但这似乎不适用于 Object 中的数组。

目前，如果我想设置颜色，我去：

<TextField onChange={addColor1}/>
<TextField onChange={addColor2}/>
<TextField onChange={addColor3}/>

然后我创建一个array colors = [color1, color2, color 3]，最后我 `setInfo({...info, colors:colors})

但是我想知道是否有一种方法可以设置颜色数组而不必编写重复的函数，例如addColor1，addColor2...

谢谢！

标签： reactjsmaterial-uifrontend

解决方案

是的，您绝对可以使用单个函数来处理所有表单控件的更改事件。

最好将颜色的数据结构更改为对象或地图，但如果您想使用数组，这里有一个示例：

编辑 eloquent-pateu-lu2xo

export default function App() {
  const [info, setInfo] = useState({
    firstName: "",
    lastName: "",
    colors: new Array(3).fill("")
  });

  const handleChange = ({ target: { name, value } }) => {
    setInfo((prevInfo) => {
      if (name === "firstName" || name === "lastName") {
        return { ...prevInfo, [name]: value };
      }

      // to get 0/1/2 from color0/color1/color2
      const colorIndex = +name[name.length - 1];

      return {
        ...prevInfo,
        colors: Object.assign([...prevInfo.colors], { [colorIndex]: value })
      };
    });
  };

  return (
    <div className="App">
      <input
        type="text"
        value={info.firstName}
        name="firstName"
        onChange={handleChange}
      />
      <input
        type="text"
        value={info.lastName}
        name="lastName"
        onChange={handleChange}
      />
      <div>
        {info.colors.map((color, index) => {
          return (
            <textarea
              key={index}
              value={color}
              name={`color${index}`}
              onChange={handleChange}
            />
          );
        })}
      </div>
      {JSON.stringify(info)}
    </div>
  );
}

推荐阅读