How to Use the Same handleChange Event on Different Components - reactjs

Question

I'm trying to make a function which can disabled textfield when checkbox is checked.
The function is doing what I wanted, but when I trying to make multiple fields with the same function, the components are just bind together.
I've tried to handle them with event.target but I think I messed it up so I deleted the lines.
What should I do so they can separated into two components working individually?
Here's my code:
import React from 'react';
import Checkbox from '#material-ui/core/Checkbox';
import TextField from '#material-ui/core/TextField';
export default function Checkboxes() {
const [required, setRequired] = React.useState(true);
const [checked, setChecked] = React.useState(false);
const [disabled, setDisabled] = React.useState(false);
const handleChange = event => {
setRequired(!required);
setChecked(!checked);
setDisabled(!disabled);
};
return (
<div>
<form>
<TextField
required={required}
autoComplete="off"
id="standard-required"
label="text1"
disabled={disabled}
/>
<Checkbox
label="cb1"
checked={checked}
onChange={handleChange}
color="primary"
/>
</form>
<form>
<TextField
required={required}
autoComplete="off"
id="standard-required"
label="text1"
disabled={disabled}
/>
<Checkbox
label="cb1"
checked={checked}
onChange={handleChange}
color="primary"
/>
</form>
</div>
);
}
Here's my sandbox:
https://stackblitz.com/edit/react-ts-3zvmp5?file=demo.tsx

Answer 1

No need to use state for this purpose. This can be done with manipulating the DOM easily. I have edited your code here in the above link. Just pass the id of the input element to the function and disable it using normal javascript.

Answer 2

I solved my problem by myself.
export default function Checkboxes() {
const [required, setRequired] = React.useState({ setA: true, setB: true });
const [checked, setChecked] = React.useState({ setA: false, setB: false });
const [disabled, setDisabled] = React.useState({ setA: false, setB: false });
return (
<div>
<form>
<TextField
required={required.setA}
autoComplete="off"
id="standard-required"
label="text1"
disabled={disabled.setA}
/>
<Checkbox
label="cb1"
checked={checked.setA}
onChange={() => {
setRequired({ ...required, setA: !required.setA });
setChecked({ ...checked, setA: !checked.setA });
setDisabled({ ...disabled, setA: !disabled.setA });
}}
color="primary"
/>
</form>
<form>
<TextField
required={required.setB}
autoComplete="off"
id="standard-required"
label="text2"
disabled={disabled.setB}
/>
<Checkbox
label="cb2"
checked={checked.setB}
onChange={() => {
setRequired({ ...required, setB: !required.setB });
setChecked({ ...checked, setB: !checked.setB });
setDisabled({ ...disabled, setB: !disabled.setB });
}}
color="primary"
/>
</form>
</div>
);
}
Sandbox here.
However, I decided to separate the hooks.
It's not a large component so I decided to make hooks function individually to avoid any issue might happen in the same hook.
export default function Checkboxes() {
const [requiredA, setRequiredA] = React.useState(true);
const [checkedA, setCheckedA] = React.useState(false);
const [disabledA, setDisabledA] = React.useState(false);
const [requiredB, setRequiredB] = React.useState(true);
const [checkedB, setCheckedB] = React.useState(false);
const [disabledB, setDisabledB] = React.useState(false);
const handleChangeA = () => {
setRequiredA(!requiredA);
setCheckedA(!checkedA);
setDisabledA(!disabledA);
};
const handleChangeB = () => {
setRequiredB(!requiredB);
setCheckedB(!checkedB);
setDisabledB(!disabledB);
};
return (
<div>
<form>
<TextField
required={requiredA}
autoComplete="off"
id="standard-required"
label="text1"
disabled={disabledA}
/>
<Checkbox
label="cb1"
checked={checkedA}
onChange={handleChangeA}
color="primary"
/>
</form>
<form>
<TextField
required={requiredB}
autoComplete="off"
id="standard-required"
label="text2"
disabled={disabledB}
/>
<Checkbox
label="cb2"
checked={checkedB}
onChange={handleChangeB}
color="primary"
/>
</form>
</div>
);
}
sandbox here.