如何强制单击表单中的切换按钮之一？

Question

如何强制单击反应表单中的切换按钮之一？当用户按下提交按钮时，如果切换没有单击其中一个按钮，我想显示一个错误。我在表单中写了 required 但它仍然不起作用。简而言之，我想让点击其中一个切换按钮成为必要。我该怎么做？

我用this component

组件示例

    const FormButtonGroup = ({
                             question,
                             formKey,
                         }) => {

    const dispatch = useDispatch()
    const reduxValue = useSelector(state => state.app.forms.f3[formKey].value)
    const isSaved = useSelector(state => state.app.forms.f3[formKey].saved)

    const [input, setInput] = useState({
        value: reduxValue,
        valid: true,
    })

    const changeSelected = val => {
        setInput({...input, value: val, valid:val})
        dispatch(saveAnswer('f3', formKey, val))
    }

    useEffect(() => {
        setInput({...input, value: reduxValue})
    }, [reduxValue])

    useEffect(() => {
        if (isSaved) {
            dispatch(resetSavedStatus('f3', formKey))
        }
    }, [isSaved])

    return (
        <>

            <Row>
                <Col className='col-10'>
                    {question}
                </Col>
                <Col className='col-2'>
                 <form>
                    <ToggleButtonGroup name={formKey}
                                       type='radio'
                                       onChange={changeSelected}
                                       value={input.value}
                                       vertical={false} toggle>
                        <ToggleButton
                            className='btn-group'
                            key='1'
                            value={'true'}
                        >
                            Yes
                        </ToggleButton>
                        <p></p>
                        <ToggleButton
                            className='btn-group'
                            key='2'
                            value={'false'}
                        >
                            No
                        </ToggleButton>
                    </ToggleButtonGroup>
                </form>
                </Col>
            </Row>
            <div className='row' style={{marginTop: '-2rem'}}>
                <div className='col-2 ml-auto'>
                    <Button className='next-button' type={"submit"}>
                        Complete
                    </Button>
                </div>
            </div>
        </>
    )
}

Answer 1

为其中一个按钮使用默认值