React 中的单选按钮 - 我必须单击两次才能看到选择和更新状态

Question

我正在尝试使用从单选按钮组中选择的“是”或“否”文本更新状态。但是，当我在本地运行应用程序时，我必须单击复选框两次才能 select 一个值。这是一个 codesandbox 示例 - 它与我问这个问题的问题不同。不太确定 codesandbox 脉轮环境发生了什么：

https://codesandbox.io/s/heuristic-cloud-buq9p?file=/src/app.js

import React, { useState } from "react";
import { Stack, RadioGroup, Radio } from "@chakra-ui/core";

export default function App() {
  const options = [
    { title: "Yes", name: "yes" },
    { title: "No", name: "no" }
  ];

  const [itemName, setItemName] = useState("");

  const handleRadio = (e) => {
    setItemName(e.target.value);
    console.log("item name: ", itemName);
  };

  return (
    <RadioGroup name="radio-btn-group" defaultValue="1">
      <Stack spacing={4} direction="row">
        {options.map((key, index) => (
          <Radio
            onChange={(e) => handleRadio(e)}
            value={key.title}
            key={index}
            name={`${key.name}`}
          >
            {key.title}
          </Radio>
        ))}
      </Stack>
    </RadioGroup>
  );
}

就像我说的，codesandbox 有点奇怪，但是当我在本地运行应用程序时，我必须单击复选框两次才能 select 一个值。显然，我只想单击一次单选按钮以 select 一个值并更新状态。如果有人看到我在这里做错了什么，请告诉我。

Answer 1

由于我认为您正在尝试为单选按钮实现受控输入，我建议您尝试 chakra-ui guidelines 用于 RadioGroup 和 Radio：

function RadioExample() {
  const [value, setValue] = React.useState("1")
  return (
    <RadioGroup onChange={setValue} value={value}>
      <Stack direction="row">
        <Radio value="1">First</Radio>
        <Radio value="2">Second</Radio>
        <Radio value="3">Third</Radio>
      </Stack>
    </RadioGroup>
  )
}

正如您在 chakra 的示例中所见，onChange 和 value 属性在 RadioGroup 组件上被调用并被直接使用来自 useState 钩子。有点难以在 codesandbox 上重现，但我认为这可以解决您的问题。

Answer 2

嗯 - 这在沙盒中不起作用，但在我的应用程序中有效：https://codesandbox.io/s/heuristic-cloud-buq9p?file=/src/app.js

import React, { useState } from "react";
import { Stack, RadioGroup, Radio } from "@chakra-ui/core";

export default function App() {
  const options = [
    { title: "Yes", name: "yes" },
    { title: "No", name: "no" }
  ];

  const [value, setValue] = useState("");

  const handleRadio = (e) => {
    const value = e.target.value;
    setValue(value);
  };

  return (
    <>
      <RadioGroup onChange={setValue} value={value}>
        <Stack spacing={4} direction="row">
          {options.map((key, index) => (
            <Radio
              value={key.title}
              key={index}
              onChange={(e) => handleRadio(e)}
            >
              {key.title}
            </Radio>
          ))}
        </Stack>
      </RadioGroup>
    </>
  );
}

React 中的单选按钮 - 我必须单击两次才能看到选择和更新状态

Radio Buttons In React - I Have To Click Twice To See A Selection And Update State

radio

radio-button

reactjs

react-hooks

use-state