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
如果我不使用状态数组，我最终会覆盖状态。我怎样才能保存完整的字符串"；你好"；到myState而不是所有单独的字符？
您不需要一个数组来保存和检索表单中所有输入字段的值。
不要使用数组，而是使用一个对象文字，它将保存表单中所有输入字段的值
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>编辑：
如果要动态创建输入字段，则可以使用表示form中不同输入字段的数组或对象来动态创建输入域。
下面的代码片段显示了一个示例：
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>在TextField 中添加值
<TextField
value={state.value}