在反应状态数组中保存最新的字符串值

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

下面的代码 sn -p 显示一个例子：

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>

编辑：

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

下面的代码 sn -p 显示一个例子：

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>

Answer 2

在 TextField 中添加值

<TextField
value={state.value}