来自子组件的 React 更改状态不起作用

Question

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

我必须将子组件的状态更改为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 以将我的孩子隐藏在主要内容中。

请提供任何知识

Answer 1

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

它应该是这样的：

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

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