有人看到这里的问题吗?如果我在更改时将检查状态设置为有效。但我不想复制检查的状态数据并观察它的每一个道具的变化。
父组件获取最新的检查信息并将其置于自己的状态中,如果父组件 isChecked 更改,则 FormCheckBox isChecked 更改。我认为,它是异步工作的,当我到达测试代码的最新行时,父更新没有完成,所以我看到过时的 isChecked。
export default function FormCheckBox(props: IFormCheckBoxProps) {
const { onChange, label, isChecked, error, errorModelLabel = '' } = props
const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
onChange(event.currentTarget.checked)
}
const errorMsg = getFormErrorMsg(error, errorModelLabel)
return (
<FormGroup
as={Row}
className={cx('mb-3', { 'is-invalid': errorMsg })}
controlId="catalogDescription"
data-testid="slvy-formcheckbox"
>
<FormLabel column className="d-flex align-items-center justify-content-end fw-bold" sm={2}>
{label}
</FormLabel>
<Col className="d-flex align-items-center" sm={10}>
<input
checked={isChecked}
className={cx('checkbox', { 'is-invalid': errorMsg })}
type="checkbox"
onChange={handleChange}
/>
<Form.Control.Feedback type="invalid">{errorMsg}</Form.Control.Feedback>
</Col>
</FormGroup>
) …Run Code Online (Sandbox Code Playgroud)