你好！我是 React 的新手，正在尝试制作多个单选按钮

Question

我正在努力制作多个单选按钮，当我 select 另一个单选按钮时，它们会给我 selected 值，而前一个单选按钮会自动取消 selects。

它也没有显示 selected 单选按钮的值。我尝试在“onChange”事件上使用 handleChange 函数，但收到错误“handleChange undefined”。

这是我的代码...

    const InspectionsForm = () => {

  const [state, setState] = useState();

  const handleChange = (e) => {
    const { name, value } = e.target;

    setState({
      [name]: value,
    });
  };
  const fieldItems = [
    {
      name: "Front Bumper",
    },
    { name: "Roof" },
    { name: "Front Left Door" },
    { name: "Rear Left Door" },
    { name: "Front Right Door" },
    { name: "Rear Right Door" },
    { name: "Front Left Fender" },
    { name: "Rear Left Fender" },
    { name: "Front Right Fender" },
    { name: "Rear Right Fender" },
    { name: "Boot" },
    { name: "Rear Bumper" },
  ];

  return (
    <div className="flex-row align-items-center inspection-section">
      <h3>CAR DETAILS</h3>
      <Container className="auction-filter box-shadow">
        <div className="container-buttons"></div>
      </Container>
      <div className="my-4">
        <h3>INSPECTIONS</h3>
        <div class="table-responsive">
          <table class="table">
            <thead>
              <tr>
                <th>Fields</th>
                <th>Original</th>
                <th>Repaint</th>
                <th>PR</th>
                <th>N/C</th>
              </tr>
            </thead>
            <tbody>
              {fieldItems.map((item)=>{
                return(
                  <tr>
                  <td>{item.name}</td>
                  <td>
                    <Form.Check
                      className="radio-size"
                      type="radio"
                      aria-label="radio 1"
                      value="original"
                      name="field"
                      onChange={handleChange()}
                    />
                  </td>
                  <td>
                    <Form.Check
                      className="radio-size"
                      type="radio"
                      aria-label="radio 1"
                      value="repaint"
                      name="field"
                      onChange={handleChange()}
                    />
                  </td>
                  <td>
                    <Form.Check
                      className="radio-size"
                      type="radio"
                      aria-label="radio 1"
                      value="PR"
                      name="field"
                      onChange={handleChange()}
                    />
                  </td>
                  <td>
                    <Form.Check
                      className="radio-size"
                      type="radio"
                      aria-label="radio 1"
                      value="N/C"
                      name="field"
                      onChange={handleChange()}
                    />
                  </td>
                </tr>
                )
              })}

            </tbody>
          </table>
        </div>

        <div className="container-buttons">
          <Button className="mr-4" variant="light">
            Submit
          </Button>

          <Button variant="dark">Clear</Button>
        </div>
      </div>
    </div>
  );
};

export default InspectionsForm;

Answer 1

onChange={handleChange} 对我来说很好用。你能检查一下这个 code sandbox 并告诉我你有什么奇怪的地方吗？

PS 记得在一般情况下使用 map 或迭代创建元素时添加 key={item.name}（键必须是唯一的，所以我使用 item.name）。永远不要在反应元素中使用 class='' 但 className=''。

PS2 我编辑了代码沙箱示例以实现我认为您想要实现的目标。基本上生成 td 映射选项列表很方便。然后你必须添加 selected 属性到 form.checkbox 如果状态有相应的属性并且它的值是你正在生成的选项。

Answer 2

when I select another radio button, the previous one automatically deselect

这是因为您在整个循环中为 Form.Check 组件提供了相同的名称属性。您可以通过传入索引或项目本身的名称来避免这种情况。

but got the error "handleChange undefined".

这是因为你在 Form.Check 的 onChange 属性中调用了 return void 的函数。只需按原样传递函数而不在 onChange.

中调用它

{fieldItems.map((item, index)=>{
  return(
    <tr>
    <td>{item.name}</td>
    <td>
      <Form.Check
        className="radio-size"
        type="radio"
        aria-label="radio 1"
        value="original"
        name={`field${index}`}
        onChange={handleChange}
      />
    </td>
  ...
}

你好！我是 React 的新手，正在尝试制作多个单选按钮

HI! I'm new in react and trying to make multiple radio buttons

javascript

events

radio-button

reactjs