使用反应钩子在 JSON object 上设置 boolean 值

Question

我试图在 object 上设置 boolean 值以将它们全部提交，所有值都来自表单，并且大部分来自文本输入，所有文本输入都设置正确除了我的 boolean 元素，非常感谢任何帮助。 这是我的代码：

import React, {useState} from 'react';
import {Col} from "react-bootstrap";
import EditorElement from "../components/editorElement";
import BootstrapSwitchButton from "bootstrap-switch-button-react";

export default function ListDetails({listdetails, updateData, updatingData, selectedRow}) {

    const [input, setInput, bool] = useState(
        {
            enabled: listdetails.enabled, // <-- Here I set (or want to set) the value of my boolean, the "listdetails" parameter are the default values that comes from initial fetch.
            name: listdetails.name,
            custom1: listdetails.custom1,
            id: selectedRow
        }
    );

    const updateInputs = event => setInput({...input, [event.target.name]: event.target.value});
    const updateInputsBoolean = event => setInput({...input, [event.target.name]: event.target.checked}); //<-- Here I updatethe value of my bool element
    const{enabled, name, hooktype, custom1, custom2, custom3, custom4, custom5, endpoint} = input; // <-- Here I update all the values


    const handelSubmit = evt => {
        console.log(input);
        updateData(input, bool); //<-- Here I set the collected object and set it but "bool" is not setting 
    };

    function handleBoolean(ev) { // <-- If I run this function in the boolean onChange I get the true or false value on console but I couldnt set it in the updateData (that comes from another component where I have the axios post)
        const setBool = ev.toString();
        console.log(setBool);
        //  updateData(setBool);
    }

    return (
        <div>
            <Col className={'col-md-6'}>

            <EditorElement name='Enable/ Disabled '>
                <div>
                <BootstrapSwitchButton
                    checked={enabled === true}
                    onstyle="primary"
                    offstyle="danger"
                    name={'enabled'}
                    value={enabled}
                    onChange={e => updateInputsBoolean(e)} // <-- Here is my boolean element that is a bootstrap switch
                />
                </div>
                {listdetails.enabled ? 'is enabled' : 'is not enabled'}
            </EditorElement>

            <EditorElement name='Name'>
                <input
                    type={'text'}
                    defaultValue={name}
                    name={'name'}
                    className={'form-control'}
                    onChange={e => updateInputs(e)}
                />
            </EditorElement>
        </Col>
        <Col className={'col-md-6'}>
            <EditorElement name='Custom1'>
                <input
                    type={'text'}
                    name={'custom1'}
                    defaultValue={custom1}
                    className={'form-control'}
                    onChange={e => updateInputs(e)}
                />
            </EditorElement>

        </Col>

        <Col style={{'marginBottom': '30px', 'marginTop': '20px'}} className={'col-md-12 text-right'}>
            <button
                style={{'marginTop': '15px', 'marginBottom': '15px'}}
                type={'button'}
                className={'btn btn-primary'}
                onClick={handelSubmit} //<-- Here I handle my submit
            >
                {updatingData ? 'Updating...' : 'Save'}
            </button>
        </Col>
    </div>
);
}

提前感谢您的帮助！

Answer 1

@DrewReese 帮助我理解了这一点，我将 BootstrapSwitchButton 混淆为正常输入，但事实并非如此。 这是现在的工作代码：

    const [input, setInput] = useState(
    {
        enabled: listdetails.enabled,
        name: listdetails.name,
        custom1: listdetails.custom1,
        id: selectedRow
    }
    );
    const updateInputs = event => setInput({...input, [event.target.name]: event.target.value});
    const{enabled, name, custom1} = input;

    const handelSubmit = evt => {
        console.log(input);
        updateData(input);
    };

    function handleBoolean(ev) {
        const setBool = ev.toString();
        console.log(setBool);
        setInput({...input, enabled: ev}); //<-- I wasn't updating the enabled prop event here and now I make a copy of all inputs and set the event of enabled... VOILA! is working :)
    }

感谢 agan @DrewReese 帮助我理解这一点