响应子组件的更改状态不起作用答案

【问题标题】：React change state from child component not working响应子组件的更改状态不起作用
【发布时间】：2021-12-20 21:21:17
【问题描述】：

经过研究我找不到办法做到这一点，我想念一件小事，或者不是。

我必须从子组件将状态更改为false，但这不起作用，真正的问题是我不知道为什么。

为了显示孩子并隐藏我正在做的主要工作

that = this;
    $('#example tbody').on('click', '.btnListEdit', function () {
      var data = table.row($(this).closest('tr')).data();
      that.setState({
        edit: true
      });
});

这是我的主要 React 组件

public render(): React.ReactElement<ICertificatesListProps> {
    return (
      <div>
        {
          this.state.tableItems.length === 0 ?
            (
              <LinearProgress />
            ) : (
              <div>
                 {
                this.state.edit ?
                (
                  <EditCert description={undefined} context={this.props.context}  myprops={this.state} handler={this.handlerFilters} />
                ) : (

我正在传递我的“myprops”来触发子组件中此组件中的句柄

 handlerFilters() {
    this.setState({
      edit: false
    });
  }

我的子组件

import * as React from 'react';

export const EditCert = (myprops) => {
    function ExitHandler() {
        myprops.handleFilters();
    }

    return (
        <div>
            <Select
                labelId="selPrintedLabel"
                id="selPrinted"
                label="Printed"
                fullWidth={true}
                variant="outlined"
            // value={this.state.selectYesNo}
            // defaultValue={this.state.selectYesNo}
            // onChange={e => this.setState({ selectYesNo: typeof e.target.value === 'string' ? e.target.value : '' })}

            >
                <MenuItem value="">
                    <em>All</em>
                </MenuItem>
                <MenuItem value={"1"}>Yes</MenuItem>
                <MenuItem value={"0"}>No</MenuItem>
            </Select>
            <Button onClick={ExitHandler} size="small" style={{ "width": "100%" }} id="fireModal" variant="contained" >Certificate labels</Button>
        </div>
    );
}

为了将我的孩子隐藏在主目录中，孩子的处理程序不会将状态触发为 false。

请提供任何知识

【问题讨论】：

子错误Uncaught TypeError: myprops.handlerFilters is not a function
请注意，myprops 不仅是您传递给子组件的 myprops 属性，它还是您传递给它的所有道具。所以在孩子中，如果你想调用它，你需要访问你作为 myprops.handler() 的函数。

标签： javascript reactjs spfx

【解决方案1】：

我猜 EditCert 是您的子组件。如果是，那么您的问题是您将 handlerFilters 函数作为处理程序传递给子组件，但在子组件中您试图通过 handlerFilters 访问它。

应该是这样的：

function ExitHandler() {
    myprops.handler();
}

还要注意有一个错字，一开始你写handlerFilters，在你写handleFilters的child中。

【讨论】：

正在工作我必须有handler() { this.setState({ edit: false }); } 谢谢