Question

我正在努力解决具有复选框组件的 App.js 问题。当有人勾选该组件中的复选框时，我希望在 App.js 文件中更新该复选框的状态。我的复选框组件的代码如下。如果有任何区别，我将使用材料 ui。

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>
  );
}

App.js 中相关的代码是：

<Grid>
  <Checkboxes  />
</Grid>

我该怎么办？如何修改上面的代码？

Answer 1

如果您想将状态保留在 App 组件中，那么您需要将一个函数传递给您的子组件，该函数将用于将状态发送到父 (App) 组件。

在您的父组件中，您将创建状态以便可以存储复选框的每个状态并传递将处理状态更新的函数。我会将状态存储在 Map 中，以避免在每次更新时重复出现相同的复选框。此外，将 id 传递给每个 Checkbox 组件，以便您在稍后更新时知道哪个状态指向哪个复选框。

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;

在您的子组件中，您将接受函数和 id，然后通过复选框的 event 方法中的 id 和 onChange 传递该函数。< /p>

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>
  );
}

通过这种方式，您可以存储多个复选框的状态，并且您可以通过 id 轻松跟踪哪个状态。

Answer 2

您可以在父级中使用常规状态机制，并将其传递给 CheckboxLabels 组件。因此将 setChecked 和 checked 值向下发送：

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>
  );
}

我不确定您的代码在命名方面是否良好，但我补充说复选框组件是 name CheckboxLabels

从子组件更新状态到父组件

2 个答案: