reactjs - 将最新的字符串值保存在 react 状态数组中

Question

我有一个包含多个文本框的 react 表单。我试图通过单击按钮来获取所有文本框的值。为此，我使用了一系列状态。这是我的状态，它是一个对象数组:

const [myState, setMyState] = useState([{
   stringValue: {
      name: "",
      value: ""
   },
       
}])

这是我的文本字段:

<TextField 
  onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
      setMyState([...myState, {
        stringValue: {
          name: displayName,
          value: e.target.Value
        }
      },])}
/>

单击按钮时，我想获取所有文本框的值，但由于我使用的是状态数组，因此我的 myState 数组如下所示:

h
he
hel
hell
hello

如果我不使用状态数组，我最终会覆盖状态。如何将完整字符串“hello”保存到 myState 而不是所有单个字符？

Answer 1

您不需要数组来保存和检索表单中所有输入字段的值。

不要使用数组，而是使用对象文字来保存表单中所有输入字段的值。您所在的州可能具有以下结构

const [data, setData] = useState({
   input1: '',
   input2: '',
   input3: ''
});

并将每个输入字段设置为 controlled component ，这意味着它的值将由组件的状态驱动。

这样您就可以访问所有字段的值并仅使用单个 onChange 事件处理程序更新输入字段的值。

const handleChange = (event) => {
   const { name, value } = event.target;
   setData({ ...data, [name]: value });
};

以下代码片段显示了一个示例:

function App() {
  const [data, setData] = React.useState({
    input1: "",
    input2: "",
    input3: ""
  });

  const handleChange = (event) => {
    const { name, value } = event.target;
    setData({ ...data, [name]: value });
  };

  return (
    <div>
      <input
        type="text"
        name="input1"
        value={data.input1}
        onChange={handleChange}
      />
      <input
        type="text"
        name="input2"
        value={data.input2}
        onChange={handleChange}
      />
      <input
        type="text"
        name="input3"
        value={data.input3}
        onChange={handleChange}
      />
      <br />
      {JSON.stringify(data)}
    </div>
  );
}

ReactDOM.render(<App/>, document.getElementById('root'));

input { display: block; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>

编辑:

如果您想动态创建输入字段，则可以使用数组或表示表单中不同输入字段的对象动态创建输入字段。

以下代码片段显示了一个示例:

function App() {
  const [data, setData] = React.useState({
    input1: { type: "text", value: "", name: "input1" },
    input2: { type: "text", value: "", name: "input2" },
    input3: { type: "text", value: "", name: "input3" }
  });

  const handleChange = (event) => {
    const { name, value } = event.target;
    setData({ ...data, [name]: { ...data[name], value } });
  };

  return (
    <div>
      {Object.keys(data).map((k) => {
        const { type, value, name } = data[k];
        return (
          <input
            key={k}
            type={type}
            value={value}
            name={name}
            onChange={handleChange}
          />
        );
      })}
      <br />
      {/* just for demo */}
      {Object.keys(data).map((k) =>
        JSON.stringify({ name: data[k].name, value: data[k].value })
      )}
    </div>
  );
}

ReactDOM.render(<App/>, document.getElementById('root'));

input { display: block; margin: 8px 0; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>