javascript - 我想使用 ReactJs 将所有按钮值保存在数组中

Question

我有 3 个具有相同名称和不同值的按钮，我希望当我单击任何按钮时，它都会获取值并保存在数组中。例如[1,2]。

这是我的代码

import React, { useState } from "react";
const UserDetails = ({ navigation }) => {
  // Here i make a state
  const [selecthostingOption, setselecthostingOption] = useState([]);
  const hostingChange = e => {
    e.preventDefault();
    console.log(e.target.value);
    setselecthostingOption(e.target.value);
  };
  return (
    <>
      <button onClick={hostingChange} name="selecthostingOption" value="1">
        Value 1
      </button>
      <button onClick={hostingChange} name="selecthostingOption" value="2">
        Value 2
      </button>
    </>
  );
};
export default UserDetails;

我已附上图片。

Answer 1

当您像 setselecthostingOption(e.target.value) 这样调用 set 函数时，您并不是将值插入数组，而是将数组替换为分配给的任何值e.target.value.

为了能够进入您的状态，您需要为其提供包含您的值的新数组。

setselecthostingOption(prevState => [
  ...prevState,
  newValue
])

如何使用:

const onClick = (ev) => {
  const value = ev.target.value
  setter(prevState => [
    ...prevState,
    value
  ])
}

<button onClick={onClick} value="1">Click Me</button>