时间戳

首页 > 解决方案 > 如何处理多个单选按钮及其值 - ReactJs

javascript - 如何处理多个单选按钮及其值 - ReactJs

问题描述

所以我有一个问题，我必须处理一些来自映射的 api json 数据的单选按钮

这大概是它的样子 收音机

这两个单选按钮在不同的组中，但是当我选择第一个单选按钮中的值并切换到第二个单选按钮时，第一个单选按钮的值会移动到第二个单选按钮，所以即使只有 1 个值2 个单选按钮位于不同的组中。

有关更多详细信息，我可能会在此处附上现场演示

我的问题如何将每个单选按钮的值存储到数组中？先感谢您

＃更新

我已经解决了我的问题，如果有人有同样的问题，你可以检查我的代码框

标签： javascriptreactjs

解决方案

您可以使用 useEffect 和 useState 钩子来获得无线电组值，如下所示：

import React from "react";

export default function App() {
  const [first, setFirst] = React.useState("");
  const [sec, setSec] = React.useState("");
  const [radioValues, setRadioValues] = React.useState([]);

  React.useEffect(() => {
    const values = [];
    if (first.length) values[0] = first;
    if (sec.length) values[1] = sec;
    setRadioValues(values);
  }, [first, sec]);
  return (
    <div className="App">
      <div onChange={(e) => setFirst(e.target.value)}>
        <input type="radio" value="Male" name="gender" /> Male
        <input type="radio" value="Female" name="gender" /> Female
      </div>
      <br></br>
      <div onChange={(e) => setSec(e.target.value)}>
        <input type="radio" value="Sunny" name="weather" /> Sunny
        <input type="radio" value="Cloudy" name="weather" /> Cloudy
      </div>
      {JSON.stringify(radioValues)}
      {JSON.stringify(first)}
      {JSON.stringify(sec)}
    </div>
  );
}

推荐阅读