为什么 props.action 不是我的 handleChange 函数中的函数？答案

【问题标题】：Why is props.action not a function in my handleChange function?为什么 props.action 不是我的 handleChange 函数中的函数？
【发布时间】：2020-09-11 02:08:21
【问题描述】：

我对 React 和 Material UI 比较陌生，我正在尝试构建一个包含候选名称列表的表和一个用于选择这些候选并将这些值传递到另一个表的列。但是，我不断收到 props.action 不是我的 handleChange 函数中的函数？

我的班级的构造函数

class AssignExaminer extends React.Component {
    constructor(props) {
        super(props)
        this.handleCheck = this.handleCheck.bind(this);
        this.state = {
            candidate: dummyCandidate,
            checkedValues: []
        };
handleCheck(e, x) {
        this.setState(state => ({
            checkedValues: state.checkedValues.includes(x)
                ? state.checkedValues.filter(c => c !== x)
                : [...state.checkedValues, x]
        }));
    }

我的桌子

<TableBody>
                                {(this.state.candidate).map((candidate) => (

                                    <TableRow>
                                        <TableCell>
                                            {candidate.name}
                                        </TableCell>
                                        <TableCell>
                                            <Checkbox  onChange={e => this.handleCheck(e, candidate.name)}
                                                checked={this.state.checkedValues.includes(candidate.name)} />
                                        </TableCell>
                                            </TableRow>
                                        ))}
                            </TableBody>

我的复选框类

export default function CheckboxLabels(props) {

  const handleChange = (event) => {
    props.action(event);
  };

  return(
        <>
          <StyledCheckbox  checked={props.checked} onChange={handleChange}/>
            {props.name}
        </>
  );
}

【问题讨论】：

标签： reactjs forms checkbox material-ui

【解决方案1】：

您传递给CheckboxLabels 组件的道具是onChange 而不是action，因此您需要调用props.onChange

export default function CheckboxLabels(props) {

  const handleChange = (event) => {
    props.onChange(event);
  };

  return(
        <>
          <StyledCheckbox  checked={props.checked} onChange={handleChange}/>
            {props.name}
        </>
  );
}

【讨论】：