传递onChange函数已为参数复选框

Question

我有一个将道具传递给父母的复选框，并且我已经停止使用handleChange函数，并且无法理解我在做什么错了

---

我的子组件

import Checkbox from "@material-ui/core/Checkbox";

const Form = (props) => {      
const {values: {debtorIsIndividual},handleChangeCheck } = props 
  return (
    <Checkbox
        checked={debtorIsIndividual}
        onChange={() => handleChangeCheck("debtorIsIndividual")}
        value="debtorIsIndividual"
      />
  )
}

我的父组件类Component

handleChangeCheck = name => ({ target: { checked } }) => {
   this.setState({ [name]: checked });
};

const {  debtorIsIndividual } = this.state;
const values = {
  debtorIsIndividual: debtorIsIndividual
};

return 
  <Form  handleChangeCheck={this.handleChangeCheck} />

我在做什么错？ 演示https://codesandbox.io/embed/checkbox-material-35kqr

---

P.S。当然，我可以传递一个静态参数，但是我需要它是动态的，因为我将以这种形式使用多个复选框

Answer 1

问题似乎最终源于在onChange事件处理程序中使用匿名函数代替直接引用所需的道具。

onChange={() => handleChangeCheck("debtorIsIndividual")}

这可能是特定于Material-ui API的：https://material-ui.com/api/checkbox/

我为您创建了一个沙箱，以使您了解如何进行此工作：https://codesandbox.io/s/optimistic-archimedes-1cewz

从本质上来说，您似乎只是希望能够将复选框中的值向上传递到父级组件。这也是代码：

父母

class App extends React.Component {
  state = {
    name: false,
    age: false,
    docs: false
  };

  handleOnChange = e => {
    const { name, checked } = e.target;
    this.setState(
      {
        [name]: checked
      },
      () => console.log(this.state)
    );
  };

  render() {
    return (
      <div>
        <Form {...this.state} handleOnChange={this.handleOnChange} />
      </div>
    );
  }
}

孩子

import React from "react";
import { Checkbox } from "@material-ui/core";

const Form = props => {
  return (
    <div>
      <div>
        User Verifed:{" "}
        <Checkbox
          onChange={props.handleOnChange}
          name="name"
          checked={props["name"]}
        />
      </div>
      <div>
        Age Verifed:{" "}
        <Checkbox
          onChange={props.handleOnChange}
          name="age"
          checked={props["age"]}
        />
      </div>
      <div>
        Docs Verifed:{" "}
        <Checkbox
          onChange={props.handleOnChange}
          name="docs"
          checked={props["docs"]}
        />
      </div>
    </div>
  );
};