Question

我正在使用 materil-ui 复选框，但它不起作用。

    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;

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

    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>
        </>
        );
    };

所有其他控件都可以正常工作，只是复选框不起作用。在控制台中，复选框的值保持不变，同时它仍然选中和取消选中。值是 re-rendered 还是什么，我在这里有点困惑。

Answer 1

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

https://material-ui.com/components/checkboxes/

就你而言。

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

确保您 onChange 实际上将其设置为 TRUE 或 FALSE :) 它应该可以工作。

干杯！

示例编辑

请检查下面带有代码框的 URL。我已经制作了两个组件，你提取的一个和初始的一个，用于显示数据，并将其注销。

https://codesandbox.io/s/confident-heyrovsky-30mzi?file=/src/App.js:713-719

NewUser 组件的代码，正如你提供的，我已经更新了：

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}
                />
                </>
        )
    }

这是初始复选框，值来自 values.isActive

这是在按下复选框之后。更新后的值在 console.log 中可见

反应复选框值不改变

1 个答案: