带 React 的单选按钮

Question

我的单选按钮无法正常工作，最大的问题是当我单击单选项目时未设置选中的属性。

\n

知道为什么它不能正常工作以及如何实现上述几点吗？

\n

请参阅下面的代码片段，它在这里不起作用，不知道为什么。

\n

\r\n

\r\n

class Root extends React.Component {\n  render() {\n    return (\n        <div>\n        Group 1: <RadioButton />\n        Group 2: <RadioButtonGroup />\n      </div>\n    );\n  }\n}\n\nimport React, { useState } from "react"\n\ninterface SharedProps {\n  /**\n   * Specify whether the control is disabled\n   */\n  disabled?: boolean\n\n  /**\n   * Specify whether the <RadioButton> is currently checked\n   */\n  defaultChecked?: boolean\n\n  /**\n   * Provide where label text should be placed\n   */\n  labelPosition: "right" | "left"\n\n  /**\n   * Provide a name for the underlying `<input>` node\n   */\n  name: string\n\n  /**\n   * Provide an optional `onChange` hook that is called each time the value of\n   * the underlying `input` changes\n   */\n  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void\n}\n\nexport interface RadioButtonProps extends SharedProps {\n  /**\n   * Provide label text to be read by screen readers when interacting with the\n   * control\n   */\n  labelText: string\n\n  /**\n   * Specify the value of the <RadioButton>\n   */\n  value: string | number\n\n  /**\n   * Specify whether the <RadioButton> is currently checked\n   */\n  checked: boolean\n\n  /**\n   * Specify whether the label should be hidden, or not\n   */\n  hideLabel: boolean\n\n  /**\n   * Event \xe2\x80\x93 on click\n   */\n  onClick?: (event: React.MouseEvent<HTMLInputElement>) => void\n\n  // Radio Btn Label next to Radio input.\n  inputLabel?: string\n\n  // Field required\n  required?: boolean\n}\n\nexport interface RadioButtonGroupProps extends SharedProps {\n  // Radio Btn Label next to Radio input.\n  inputLabelGroup?: string\n\n  /**\n   * Provide a collection of components to render in the group\n   */\n  items: Array<RadioButtonProps>\n  /**\n   * Provide where radio buttons should be placed\n   */\n  orientation: "horizontal" | "vertical"\n\n  /**\n   * Specify the value of the <RadioButton>\n   */\n  valueSelected: string | number\n}\n\nexport const RadioButton = ({\n  labelText,\n  value,\n  checked,\n  hideLabel,\n  onClick,\n  inputLabel,\n  required,\n  disabled,\n  defaultChecked,\n  labelPosition,\n  name,\n  onChange,\n}: RadioButtonProps) => {\n  const [isChecked, setIsChecked] = useState(checked)\n  return (\n    <div>\n      <input\n        id="radiobutton-1"\n        type="radio"\n        name={name}\n        required={required}\n        disabled={disabled}\n        aria-label="example"\n        value={value}\n        checked={isChecked}\n        onChange={onChange}\n        onClick={() => setIsChecked(!isChecked)}\n        defaultChecked={defaultChecked}\n      />\n\n      <label htmlFor="radiobutton-1">\n        {!hideLabel && <span aria-label={labelText}>{inputLabel}</span>}\n      </label>\n    </div>\n  )\n}\n\n// Default Value of hideLabel\nRadioButton.defaultProps = {\n  hideLabel: false,\n  checked: false,\n}\n\nexport const RadioButtonGroup = ({\n  orientation,\n  valueSelected,\n  disabled,\n  // defaultChecked,\n  labelPosition,\n  inputLabelGroup,\n  name,\n  items,\n  onChange,\n}: RadioButtonGroupProps) => {\n  const [active, setActive] = useState(Number)\n  const mappedItems = items.map(\n    ({ inputLabel, labelText, value, hideLabel, required }, index) => (\n      <RadioButton\n        name={name}\n        key={index}\n        inputLabel={inputLabel}\n        required={required}\n        \n        checked={active === index}\n        \n        onClick={() => setActive(index)}\n        onChange={onChange}\n        labelText={labelText}\n        value={value}\n        disabled={disabled}\n        hideLabel={hideLabel}\n        \n        labelPosition={labelPosition}\n      />\n    )\n  )\n  return (\n    <div>\n      <label>{inputLabelGroup}</label>\n      {mappedItems}\n    </div>\n  )\n}\n\nReactDOM.render(\n  <Root />,\n  document.getElementById(\'container\')\n);

\r\n

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet"/>\n<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>\n<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>\n\n<div id="container"></div>

\r\n

\r\n

\r\n

\n

任何帮助，将不胜感激。

\n

Answer 1

我认为您的问题出在name您输入的属性上。您为每个输入指定不同的名称，以便使每个输入属于不同的组。所有无线电输入必须具有相同的名称（请参阅此处）或name根本没有属性。

id顺便说一句，在大多数情况下，编写 React 代码时不需要添加属性。

该函数还useState接受默认状态作为参数，而不是类型。

请看这个简单的代码片段：

class Root extends React.Component {
  render() {
    return (
        <div>
        Group 1: <RadioGroup />
        Group 2: <RadioGroup />
      </div>
    );
  }
}

const RadioGroup = () =>{
   const [active, setActive] = React.useState(0);
   return (
    <div>
      <input type="radio" checked={active==0} onClick={() => setActive(0)} />
      <input type="radio" checked={active==1} onClick={() => setActive(1)} />
    </div>
   );
}

ReactDOM.render(
  <Root />,
  document.getElementById('container')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>

<div id="container"></div>

如果我可以给你一个小提示：当试图找出代码中的问题时，请尝试尽可能简化代码并删除不必要的元素，例如样式元素等。如果您将此代码发布到 SO，那么审查您的代码将会更容易。