如何在react js中将onchange值逐个存储在数组状态中

在React.js中，可以通过以下步骤将onchange的值逐个存储在数组状态中：

首先，在组件的状态中定义一个空数组来存储onchange的值。可以使用useState钩子函数来创建状态变量。例如：

const [values, setValues] = useState([]);

在组件的JSX中，将onchange事件绑定到输入元素上，并在事件处理函数中将输入的值添加到数组状态中。例如：

<input type="text" onChange={(e) => setValues([...values, e.target.value])} />

这里使用了扩展运算符(...)来创建一个新的数组，将之前的values数组中的元素和当前输入框的值一起添加到新数组中，并通过setValues函数更新状态。

现在，每次输入框的值发生变化时，onchange事件会触发，并将新的值添加到数组状态中。

完整的示例代码如下：

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中动态地存储和展示多个输入框的值，适用于表单、多选框、下拉列表等场景。