从 React.js 中的父组件调用子组件函数

Question

我正在尝试从父组件中的按钮单击事件调用子组件中的函数。

父组件：

class Parent extends Component{
    constructor(props){
        super(props);
        this.state = {
            //..
        }
    }

    handleSaveDialog = (handleSaveClick) => {
        this.handleSaveClick = handleSaveClick;
    }

    render(){
        return(
            <div>
                <Button onClick={this.openDialog}>Open Dialog</Button>
                <Dialog>
                    <DialogTitle id="form-dialog-title">Child Dialog</DialogTitle>
                    <DialogContent>
                        <Child handleSaveData={this.handleSaveDialog}/>
                    </DialogContent>
                    <DialogActions>
                        <Button onClick={this.handleSaveClick} color="primary">
                            Save
                        </Button>
                    </DialogActions>
                </Dialog>       
            </div>  
        );
    }
}

在上面的代码中，父组件在单击按钮时呈现一个子组件模式对话框（基于 Material-UI）。保存按钮是 Parent 中 Dialog 组件的一部分，单击时应调用 Child 组件中的保存函数。如您所见，我通过名为handleSaveData 的Childcomponent 属性传递了一个回调函数handleSaveDialog。一旦子组件挂载并将回调传递给父组件，保存按钮单击将在子组件上调用handleSaveClick。

子组件：

class Child extends Component{
    constructor(props){
        super(props);
        this.state = {
            //..
        }
    }

    componentDidMount(){
        console.log('mount');
        this.props.handleSaveData( () => this.handleSaveClick());
    }

    handleSaveClick = () => {
        console.log('save clicked');
    }

    render(){
        return(
            <div>
                //..
            </div>      

        );
    }
}

在上面的代码中，我使用的是访问Parent组件props传递的回调函数并将其绑定到Child组件的保存函数handleSaveClick。

问题：

当我在 Parent 中单击 Open Dialog 按钮时，Dialog 第一次安装了 Child 组件。但是，单击Save 按钮不起作用（没有错误）。之后，关闭对话框，当我重新打开对话框并单击保存时，将触发子对话框中的 handleSaveClick，并在浏览器控制台中记录一条消息。知道为什么这在第二次而不是第一次有效吗？ 请记住，只有当我单击父组件上的打开对话框时，子组件才会被安装/加载。

参考资料：

https://material-ui.com/components/dialogs/#form-dialogs

Call child method from parent

https://github.com/kriasoft/react-starter-kit/issues/909#issuecomment-390556015

Answer 1

它不起作用，因为如果您在render 函数中控制台记录this.handleSaveClick，它将是undefined，因为没有重新渲染。所以有两种方法可以做到这一点：

• 状态下的保存功能。链接：https://codesandbox.io/s/fervent-browser-gw75c

class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      open: false
    };
  }

  openDialog = () => {
    this.setState(preState => ({
      open: !preState.open
    }));
  };

  handleSaveDialog = handleSaveRef => {
    this.setState({
      handleSaveClick: handleSaveRef
    });
  };

  render() {
    console.log("Render", this.handleSaveClick);
    return (
      <div>
        <Button onClick={this.openDialog}>Open Dialog</Button>
        <Dialog open={this.state.open}>
          <DialogTitle id="form-dialog-title">Child Dialog</DialogTitle>
          <DialogContent>
            <Child handleSaveData={this.handleSaveDialog} />
          </DialogContent>
          <DialogActions>
            <Button onClick={this.state.handleSaveClick} color="primary">
              Save
            </Button>
          </DialogActions>
        </Dialog>
      </div>
    );
  }

class Child extends Component {

  componentDidMount() {
    console.log("mount");
    this.props.handleSaveData(this.handleSaveClick);
  }

  handleSaveClick = () => {
    console.log("save clicked");
  };

  render() {
    return <div>//..</div>;
  }
}

---

• 使用ref。链接：https://codesandbox.io/s/musing-kalam-nj29n

const childRef = React.createRef();
class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      open: false
    };
  }

  openDialog = () => {
    this.setState(preState => ({
      open: !preState.open
    }));
  };

  handleSaveClick = () => {
    if (childRef.current) {
      childRef.current.handleSaveClick();
    }
  };

  render() {
    return (
      <div>
        <Button onClick={this.openDialog}>Open Dialog</Button>
        <Dialog open={this.state.open}>
          <DialogTitle id="form-dialog-title">Child Dialog</DialogTitle>
          <DialogContent>
            <Child ref={childRef} />
          </DialogContent>
          <DialogActions>
            <Button onClick={this.handleSaveClick} color="primary">
              Save
            </Button>
          </DialogActions>
        </Dialog>
      </div>
    );
  }
}

class Child extends Component {
  handleSaveClick = () => {
    console.log("save clicked");
  };

  render() {
    return <div>//..</div>;
  }
}

---

• 使用回调保存实例而不是使用箭头函数：

class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      open: false
    };
  }

  openDialog = () => {
    this.setState(preState => ({
      open: !preState.open
    }));
  };

  handleSaveDialog = handleSaveRef => {
    this.handleSaveClick = handleSaveRef;
  };

  render() {
    return (
      <div>
        <Button onClick={this.openDialog}>Open Dialog</Button>
        <Dialog open={this.state.open}>
          <DialogTitle id="form-dialog-title">Child Dialog</DialogTitle>
          <DialogContent>
            <Child handleSaveData={this.handleSaveDialog} />
          </DialogContent>
          <DialogActions>
            <Button onClick={() => this.handleSaveClick()} color="primary">
              Save
            </Button>
          </DialogActions>
        </Dialog>
      </div>
    );
  }
}

class Child extends Component {
  componentDidMount() {
    console.log("mount");
    this.props.handleSaveData(this.handleSaveClick);
  }

  handleSaveClick = () => {
    console.log("save clicked");
  };

  render() {
    return <div>//..</div>;
  }
}

您需要在onClick 中使用箭头函数，因为它会在我们每次单击时创建一个新函数，从而获得handleClick 的新实例。如果您通过this.handleClick，它将无法工作，因为它是undefined。您可以通过在render 函数中记录this.handleClick 的值来检查这一点。

---

注意：使用2 选项更可靠。

希望这会有所帮助！

Answer 2

好吧，我不知道你为什么会有这种情况，但我首先想到的是你可以在父组件中编写handleSaveClick 方法。如果您需要在子组件中可能发生的任何操作上使用该函数，您可以将此函数作为来自父组件的 prop 传递。所以你的两种情况都可以处理

• 您可以在父组件中发生的事情上调用此方法
• 您可以对子组件中发生的任何操作使用相同的方法。

如果你仍然认为你必须在你的子组件中定义方法，你可以使用refs