Javascript 反应复选框值不更改

我正在使用

materialui

复选框，但它不起作用

    const initialValues = {
        // other values
        isActive: true,
    };


    const NewUser = () => {

        const [values, setValues] = React.useState(initialValues);
    
        const handleInput = (e) =>{
            
        const { name, value } = e.target;
        setValues({ ...values, [name]:value });
        console.log(value)


        return (
            <form>
                <Grid item xs={12} md={6}>
                    {/* other form controls */}

                <Checkbox
                    value={values.isActive}
                    name="isActive"
                    label="Is the Employee Active?"
                    onChange={handleInput}
                />
            </form>
        )
    }
    
    export default NewUser;

常量初始值={
//其他价值观
是的，
};
const NewUser=（）=>{
const[values，setValues]=React.useState（initialValues）；
常量handleInput=（e）=>{
常量{name，value}=e.target；
setValues（{…values，[名称]：value}）；
console.log（值）
返回(
{/*其他表单控件*/}
)
}
导出默认新用户；

我试着把它放在一个单独的组件中，这样我可以像这样单独处理它：

    export const CheckBoxField =(props) =>{
        const { name, label, value, onChange }= props;
        const [checked, setChecked] = React.useState(true);
        const handleChange = (event) => {
            setChecked({ ...checked, [event.target.name]: event.target.checked });
        };
    
        const convertPara = (name, value)=>({
            target:{
                name, value
            }
            
        });

    
        return (
        <>
            <FormControl>
            <FormControlLabel
                label={label}
                control={
                    <Checkbox
                        checked={value}
                        name={name}
                        color="primary"
                        onChange={event => onChange(convertPara(name, event.target.checked))}
                    />
                }
             />
            </FormControl>
        </>
        );
    };

export const CheckBoxField=（道具）=>{
const{name，label，value，onChange}=props；
const[checked，setChecked]=React.useState（true）；
常量handleChange=（事件）=>{
setChecked（{…checked，[event.target.name]：event.target.checked}）；
};
const convertPara=（名称、值）=>({
目标：{
名称、值
}
});
返回(
}
/>
);
};

所有其他控件都可以正常工作，只是复选框不起作用。

---

在控制台中，复选框的值保持不变，但仍会选中或取消选中。值是重新呈现的还是什么，我在这里有点困惑。

只是想让您知道，复选框没有值，它有一个名为“checked=TRUE/FALSE”的属性

你的情况也是如此

               <Checkbox
                    checked={values.isActive}
                    name="isActive"
                    label="Is the Employee Active?"
                    onChange={handleInput}
                />

这是初始复选框，该值是从

values.isActive

---

这是在按下复选框后进行的。更新后的值在

控制台中可见。log

---

尝试了@sarunaso，根据您提供的提取组件，我注意到了一些错误。当状态为checked时，当您将其初始化为布尔值，然后尝试将其设置为object时，onChange并没有按预期工作，我仍然无法理解converPara的必要性。我试图为复选框重做您的组件，当它在控制台中被选中/取消选中时，它会显示出来。请在这里找到：convertPara的作用是什么，但你已经出去帮忙了，我说谢谢。

const initialValues = {
        // other values
        isActive: true,
    };

 const NewUser = () => {

        const [values, setValues] = useState(initialValues);
    
        function handleCheckbox(event){
          setValues({...values, [event.target.name]:event.target.checked})
        }
        console.log("THIS IS FROM INITIAL FROM FIRST TIME ASKED" ,values.isActive)


        return (<>
                <Checkbox
                    checked={values.isActive}
                    name="isActive"
                    label="Is the Employee Active?"
                    onChange={handleCheckbox}
                />
                </>
        )
    }