时间戳

首页 > 解决方案 > 选择后React-bootstrap无法取消选择单选按钮？

reactjs - 选择后React-bootstrap无法取消选择单选按钮？

问题描述

我可以选择我的一个单选按钮，但我无法取消选择它。任何想法我在这里做错了什么：

 /**
 * @description Handles the state for the radio.
 * @param {event}
 * @returns {Object} Returns boolean values.
 */
const handleChange = (event) => {
    const arr = Object.keys(check);
    console.log(arr.length, arr.includes(event.target.name), event.target.name, arr);
    if (arr.length === 1 && arr.includes(event.target.name) === false) {
        setAlert(true);
    } else if (arr.length === 1 && arr.includes(event.target.name) === true) {
        setAlert(false);
        setCheck({});
    } else {
        setCheck({ ...check, [event.target.name]: event.target.checked });
        setAlert(false);
    }
};

switch (state) {
    case apiStates.ERROR:
        return (
            <p>
                ERROR:
                {error}
            </p>
        );
    case apiStates.SUCCESS:
        return (
            <Col id="modelColumns" className="col-lg-6 text-center">
                <p className="selectText">Select an Earth Gravitational Model:</p>
                {radio.map((item) => (
                    <Row className="justify-content-md-center">
                        <label
                            key={item.key}
                            htmlFor={item.key}
                            id="geoidLabels"
                        >
                            <span id="modelSpan">
                                <Radio
                                    id={item.key}
                                    name={item.name}
                                    checked={check[item.name]}
                                    onChange={handleChange}
                                />
                                {item.name}
                            </span>
                        </label>
                    </Row>

选择单选按钮之一后，handleChange 事件似乎没有触发。我正在使用 useState 挂钩来管理状态。

标签： reactjsreact-bootstrap

解决方案

这可能会在将来对某人有所帮助，但这是工作代码。比上一个简单得多：

function Models() {
const [check, setCheck] = useState('');

const {
    apiStates, state, error, radio,
} = GetModels();
/**
 * @description Handles the state for the radio.
 * @param {event}
 * @returns {Object} Returns boolean values.
 */
const handleChange = (event) => {
    setCheck(event.target.name);
};

switch (state) {
    case apiStates.ERROR:
        return (
            <p>
                ERROR:
                {error}
            </p>
        );
    case apiStates.SUCCESS:
        return (
            <Col id="modelColumns" className="col-lg-6 text-center">
                <p className="selectText">Select an Earth Gravitational Model:</p>
                {radio.map((item) => (
                    <Row className="justify-content-md-center">
                        <label
                            key={item.key}
                            htmlFor={item.key}
                            id="geoidLabels"
                        >
                            <span id="modelSpan">
                                <Radio
                                    id={item.key}
                                    name={item.name}
                                    checked={check === item.name}
                                    onChange={handleChange}
                                />
                                {item.name}
                            </span>
                        </label>
                    </Row>
                ))}
            </Col>
        );
    default:
        return <p>loading...</p>;
}

}

推荐阅读