将 state 从子组件更新到父组件

Question

I'm struggling with an issue of App.js which has a Checkboxes component. When someone ticks a checkbox in that component, I want the state for that checkbox to be updated in the App.js file. The code for my Checkboxes component is below. I am using material ui if that makes any difference.

import Checkbox from '@material-ui/core/Checkbox';
import FormGroup from '@material-ui/core/FormGroup';
import FormControlLabel from '@material-ui/core/FormControlLabel';

export default function CheckboxLabels() {
  return (
    <FormGroup row>
      <FormControlLabel
        control={<Checkbox name="checkedD" />}
        label="Remove Duplicates"
      />
    </FormGroup>
  );
}

The code in App.js that is relevant is:

<Grid>
  <Checkboxes  />
</Grid>

What should I be doing? How do I modify the above code?

Answer 1

If you want to keep the state in the App component, then you need to pass a function to your child component which will be used to send the state to the parent ( App ) component.

In your parent component, you would create the state so that each state of checkboxes can be stored and pass the function that will handle the updating of the state. I would store the state in Map to avoid having duplications of the same checkbox on each update. Also, pass an id to each of the Checkbox components so that you know which state refers to which checkbox when updating later on.

import React from "react";
import CheckboxLabels from "./CheckboxLabel";

class App extends React.Component {
  state = {
    checkboxes: new Map()
  };

  handleClick = (e, id) => {
    const { checked } = e.target;

    this.setState((prevState) => ({
      checkboxes: prevState.checkboxes.set(id, checked)
    }));
  };

  render() {
    return (
      <div className="App">
        <CheckboxLabels id={1} handleClick={this.handleClick} />
        <CheckboxLabels id={2} handleClick={this.handleClick} />
        <CheckboxLabels id={3} handleClick={this.handleClick} />
        <CheckboxLabels id={4} handleClick={this.handleClick} />
      </div>
    );
  }
}

export default App;

In your child component, you would accept the function and the id and then pass that function with the event and id in onChange method of the checkbox.

import React from "react";
import Checkbox from "@material-ui/core/Checkbox";
import FormGroup from "@material-ui/core/FormGroup";
import FormControlLabel from "@material-ui/core/FormControlLabel";

export default function CheckboxLabels({ id, handleClick }) {
  return (
    <FormGroup row>
      <FormControlLabel
        control={<Checkbox name="checkedD" />}
        label="Remove Duplicates"
        onChange={(e) => handleClick(e, id)}
      />
    </FormGroup>
  );
}

This way, you can store the state of multiple checkboxes and you can easily track which state is which by an id .

Answer 2

You can use regular state mechanism in parent and just pass it down to CheckboxLabels component. So send setChecked and checked values down:

export default function CheckboxLabels({ checked, onChange }) {
  return (
    <FormGroup row>
      <FormControlLabel
        control={
          <Checkbox
            name="checkedD"
            checked={checked}
            onChange={(e) => {
              if (onChange) {
                onChange(e.target.checked);
              }
            }}
          />
        }
        label="Remove Duplicates"
      />
    </FormGroup>
  );
}

export default function App() {
  const [checked, setChecked] = useState(false);
  return (
    <Grid>
      <CheckboxLabels checked={checked} onChange={setChecked} />
    </Grid>
  );
}

I am not sure if your code is good naming-wise, but I added that checkbox component is name CheckboxLabels