React 在状态对象数组中设置多个输入答案

【问题标题】：React set multiple inputs in an array of a state ObjectReact 在状态对象数组中设置多个输入
【发布时间】：2021-11-07 14:48:48
【问题描述】：

我不确定是否可以这样做，在我的 React 应用程序中，我有一个 <form> 并带有以下输入字段：

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

我有一个状态

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

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

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

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

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

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

谢谢！

【问题讨论】：

您是否有任何具体原因要这样做？我只是好奇...要回答您的问题，您可以使用“推”
实际上推送到状态数组会改变它。您可以像当前散布对象一样散布数组。 setInfo({...info, colors:[...info.colors, colorToAdd]})
@NoxinDVictus 说，在未来，应用越来越大，人们想要添加更多自己喜欢的颜色，那么应该有一个按钮来添加更多输入字段并允许人们输入更多颜色，我的代码中的解决方案从来都不是我认为的理想方式

标签： reactjs material-ui frontend

【解决方案1】：

这是一个很好的问题。让我们看看我们是否可以构建一个。

  const addColor = color => e => {
    const oldColors = info.colors
    // do whatever to create a new colors
    // based on oldColors and color, ex.
    const colors = [...oldColors, color]
    
    setInfo({ ...info, colors: colors })
  }

你应该可以这样使用它。

  <TextField onChange={addColor('red')} />

这就是想法，color => e 我认为您可能会觉得它很有用。但我不知道你将如何使用数组结构。最后，我认为您的方式行不通，但请继续尝试或搜索称为小部件MultiSelect 或Checkboxes 的东西。它们更多地用于一组项目。

【讨论】：

如我所说，你需要看看TextField中实现了什么，也许你不需要e，那么你可以放弃它。

【解决方案2】：

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

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

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>
  );
}

【讨论】：