时间戳

首页 > 解决方案 > 单选按钮需要单击两次才能使用 React Hooks 进行第二次更改

reactjs - 单选按钮需要单击两次才能使用 React Hooks 进行第二次更改

问题描述

当我第一次单击任何无线电输入时，它会起作用（这意味着我只需单击一次）。当我单击第二个无线电输入时，我必须执行两次才能更改它。我如何解决它？

export default function RadioInput() {
    const { register, setValue } = useForm<FormData>();
    const [inputValue1, setInputValue1] = useState('');
    const [inputValue2, setInputValue2] = useState('');
    const [isSelected1, setIsSelected1] = useState(false);
    const [isSelected2, setIsSelected2] = useState (false);
    const onChange1 = () => {
        console.log(inputValue1)
        setInputValue1(inputValue1)
        setIsSelected1(!isSelected1)
    };
    const onChange2 = () => {
        console.log(inputValue2)
        setInputValue2(inputValue2)
        setIsSelected2(!isSelected2)
    };
    const styles = {
        radioPink: {
            border: "10px solid green"
        }
    }
    return (
        <div>
            <label className="radio">Company
                <input type="radio" checked={isSelected1} value={inputValue1} onChange=. 
                    {onChange1} name="is_company"/>
                    <span className="checkround"/>
            </label>
            <label className="radio">Company
                <input type="radio" checked={isSelected2} value={inputValue2} onChange= 
                    {onChange2} name="is_company"/>
                    <span className="checkround"/>
            </label>
            <button className="btn cust-btn " type="button" id="btn-registration"
                    >Register
            </button>
        </div>
    );
}

标签： reactjsreact-hooks

解决方案

由于这是一个无线电控制，因此只能选择一个选项。因此，它只需要一个状态。就目前而言，您可能会将两个单选选项都设置为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>
    );
}

推荐阅读