Question

当我第一次单击任何单选按钮时，它就起作用了（这意味着我只需要单击一次）。当我单击第二个无线电输入时，我必须做两次以更改它。我该如何解决？

Row(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
      Padding(
        padding: EdgeInsets.only(top: 10.0),
      child : Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Checkbox(
            checkColor: Colors.black,
            activeColor: Colors.transparent,
            value: checkBox,
            onChanged: (bool value) {
              setState(() {
                checkBox = value;
              });
            },
          ),
          ],
      ),
      ),

      Padding(
        padding: EdgeInsets.only(top: 10.0),
        child: FlatButton(
            onPressed: _launchURL,
            child: Text(
              "Termini & Condizioni",
              style: TextStyle(
                  decoration: TextDecoration.underline,
                  color: Colors.white,
                  fontSize: 16.0,
                  fontFamily: "WorkSansMedium"),
            )),
      ),
]),

Answer 1

由于这是一个无线电控件，因此只能有一个选择的选项。这样，它只需要一个状态。就目前而言，您可能会将两个单选选项都设置为true！让我们重构为只有一个状态控制此输入组。

export default function RadioInput() {
    const { register, setValue } = useForm<FormData>();
    const [inputValue1, setInputValue1] = useState('');
    const [inputValue2, setInputValue2] = useState('');
    const [selected, setSelected] = useState();

    const onChange1 = () => {
        console.log(inputValue1)
        setInputValue1(inputValue1)
        setSelected(1)
    };
    const onChange2 = () => {
        console.log(inputValue2)
        setInputValue2(inputValue2)
        setSelected(2)
    };
    const styles = {
        radioPink: {
            border: "10px solid green"
        }
    }
    return (
        <div>
            <label className="radio">Company
                <input type="radio" checked={selected === 1} value={inputValue1} onChange={onChange1} name="is_company"/>
                <span className="checkround"/>
            </label>
            <label className="radio">Company
                <input type="radio" checked={selected === 2} value={inputValue2} onChange={onChange2} name="is_company"/>
                <span className="checkround"/>
            </label>
            <button className="btn cust-btn " type="button" id="btn-registration"
                    >Register
            </button>
        </div>
    );
}

需要单击两次单选按钮以使用React Hooks进行第二次更改

1 个答案: