使用 REACT 强制选择复选框

Question

如何在多个复选框中强制只勾选一个？现在我可以 select A、B 和 C，但我只想 select 一个选择。

这是我的代码：

const TabContent = ({ name, typeText }) => {
    const [a, setA] = useState(false)
    const [b, setB] = useState(false)
    const [c, setC] = useState(false)

    function handleChange(e) {
        e.preventDefault()
    }
    return (
        <form onSubmit={handleChange} >
            {a}
            {b}
            {b}
            <input type="checkbox" onChange={(e) => setA(!a)} />  <label> A </label>
            <input type="checkbox" onChange={(e) => setB(!b)} /> <label>B</label>
            <input type="checkbox" onChange={(e) => setC(!C)} /> <label>C</label>
        </form>
        {
        (a || b) ?
            (<div>
                <p className="mt-6 py-1">My choices </p>
                <SafeAreaView>
                    <TextInput
                        onChangeText={(value) => setText(value)}
                        value={text}
                    />
                </SafeAreaView>
            </div >
            )
            : ('')
        }
        {
            c?
                (...)
        }
        </div >
    );
};

Answer 1

我想你想使用无线电输入

举例说明：

https://codesandbox.io/s/elegant-tess-wu7sl7?file=/src/App.js:0-794

import React, { useState } from "react";

export const TabContent = ({ name, typeText }) => {
  const [radio, setRadio] = useState(false);

  function handleChange(e) {
    e.preventDefault();
  }
  return (
    <form onSubmit={handleChange}>
      <input
        type="radio"
        value="A"
        onChange={(e) => setRadio(e.target.value)}
        checked={radio === "A"}
      />
      <label> A </label>
      <input
        type="radio"
        value="B"
        checked={radio === "B"}
        onChange={(e) => setRadio(e.target.value)}
      />
      <label>B</label>
      <input
        type="radio"
        value="C"
        checked={radio === "C"}
        onChange={(e) => setRadio(e.target.value)}
      />
      <label>C</label>
    </form>
  );
};

export default TabContent;

这样你就可以只跟踪一个状态。

Answer 2

您可以使用对象状态而不是使用 3 个状态来重构您的状态

const TabContent = ({ name, typeText }) => {
  const [check, setCheck] = useState({selected: "", checked: false})

  const handleCheckbox = (type) => {
    if(type === check.selected && check.checked) {
      setCheck({...check, checked: false})
    } else {
      setCheck({selected: type, checked: true})
    }
  }

  function handleChange(e) {
      e.preventDefault()
  }
  return (
      <form onSubmit={handleChange} >
          {check.selected}
          <input type="checkbox" onChange={(e) => handleCheckbox("a")} />  <label> A </label>
          <input type="checkbox" onChange={(e) => handleCheckbox("b")} /> <label>B</label>
          <input type="checkbox" onChange={(e) => handleCheckbox("c")} /> <label>C</label>
      </form>
      {
      (check.selected === ("a" || "b")) ?
          (<div>
              <p className="mt-6 py-1">My choices </p>
              <SafeAreaView>
                  <TextInput
                      onChangeText={(value) => setText(value)}
                      value={text}
                  />
              </SafeAreaView>
          </div >
          )
          : ('')
      }
      {
          (check.selected === "c") ?
              (...)
      }
      </div >
  );
};

使用 REACT 强制选择复选框

Force one selection checkboxe with REACT

checkbox

reactjs