反应复选框值不变

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 :) 它应该有效。

干杯！

用例子编辑

请使用codesanbox检查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 中可见

反应复选框值不变

React checkbox value not changing

javascript

web-frontend

reactjs