从 React 中的两个输入字段创建一个数组

Question

新手 React 问题。假设以下输入

          <div className="col-md-6">
            <input
              className="form-control"
              name="manufacturer"
              type="text"
              onChange={handleReferencesChange}
              value={references}
            />
          </div>

          <div className="col-md-6">
            <input
              className="form-control"
              name="vehicleNumber"
              type="text"
              onChange={handleReferencesChange}
              value={references}
            />
          </div>

我编写了函数 handleReferencesChange 来获取数组（引用）中两个输入的值，然后将其推送到数据库中 (mongoDB)

  const handleReferencesChange = (e) => {
    e.preventDefault();
    setValues({ ...values, references: [], [e.target.name]: e.target.value });
  }

不幸的是，我无法填充引用数组（我已经将其初始化为空数组）

请你帮我理解为什么这些值没有存储在数组中而是创建为单独的值。请参阅下面的屏幕截图。

Answer 1

您的 setValues 代码说，“获取所有值，向其中添加一个空 references 数组，然后 add/overwrite 输入的字段名称和事件的值".

如果你想把东西压入一个数组，你需要使用push。 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push

const handleReferencesChange = (e) => {
    e.preventDefault();
    const newReferences = values.references.push({[e.target.name]: e.target.value})
    const newValues = {...values, references: newReferences}
    setValues(newValues);
  }

从 React 中的两个输入字段创建一个数组

Create an array from two input fields in React

arrays

events

reactjs