在React.js中,可以通过以下步骤将onchange的值逐个存储在数组状态中:
const [values, setValues] = useState([]);
<input type="text" onChange={(e) => setValues([...values, e.target.value])} />
这里使用了扩展运算符(...)来创建一个新的数组,将之前的values数组中的元素和当前输入框的值一起添加到新数组中,并通过setValues函数更新状态。
完整的示例代码如下:
import React, { useState } from 'react';
function App() {
const [values, setValues] = useState([]);
const handleChange = (e) => {
setValues([...values, e.target.value]);
};
return (
<div>
<input type="text" onChange={handleChange} />
<ul>
{values.map((value, index) => (
<li key={index}>{value}</li>
))}
</ul>
</div>
);
}
export default App;
在这个示例中,每次输入框的值发生变化时,都会将新的值添加到数组状态中,并通过map函数将数组中的值渲染为列表项显示出来。
这种方法可以用于在React.js中动态地存储和展示多个输入框的值,适用于表单、多选框、下拉列表等场景。
领取专属 10元无门槛券
手把手带您无忧上云