CODEWITHSUNDEEP
javascriptreactjsantd
pioupiou
pioupiou

Reputation: 946

Form with model checkbox with state problem with checking

I have a table and for every column i have a model and inside a form but the checkbox I get wrong output when I click it multiple time.

I want to set up default values from the table but for checkbox something i missing and you cannot used it.

The checkbox is not working correct for some clicks.

From true is go to false and then again false.

    var defaultValues = { 
        email: data.email, 
        first: data.first,  
        last: data.last, 
        reserve: data.reserve  == "true" ? true : false,
    }

    const [isReserve, setIsReserve] = useState( defaultValues.reserve );

    useEffect(() => {
        console.log("use eeff: ",defaultValues.reserve  );
        form.setFieldsValue(defaultValues);
    }, [form, defaultValues])

    const onChangeCheck  = e => {
        setIsReserve(e.target.checked);
        console.log("clicked: ", e.target.checked);
        //defaultValues.reserve = e.target.checked;
        //form.setFieldsValue(defaultValues)
    }


     <Form.Item
         name="reserve"
         label="Is Reserve"
         valuePropName="checked"
      >
        <Checkbox onChange={onChangeCheck}></Checkbox>
      </Form.Item>

Logs from console:

clicked:  true  
use eeff:  true 

clicked:  false (here the checkbox didn't change )
use eeff:  true 

clicked:  false (use eff) is not printed

Upvotes: 1

Views: 43

Answers (1)

amit
amit

Reputation: 2061

I think you should be passing the value prop to the Checkbox component:

<Checkbox onChange={onChangeCheck} value={isReserve}></Checkbox>

Without knowing the implementation of Checkbox it's hard to explain why it behaves somethings this way, and other times differently. It can have many reasons varying from React's optimization algorithms, browser implementation and a universe of things in between,

but just pass down the value props and it should be working as expected.

Upvotes: 1

Related Questions