反应：将 2 个道具从子组件传回同一 function 中的父组件

Question

我想设置 state 并同时关闭模式，两者都是通过将道具传递回父组件来完成的。 我遇到的问题是一次似乎只有 1 人想工作。 我可以让两者都自己工作，但是一旦它们都在那里，它就不起作用了。 我该如何解决这个问题？

CHILD COMPONENT

useSelectedImage = () => {
  this.props.saveChosenImage(this.state.imageChosen)
  this.props.closeModal();
};

<button onClick={this.useSelectedImage}>INSERT IMAGE</button>


PARENT COMPONENT

state = {
imageModalOpen: false,
}
// open the image modal
openImageModal = () => {
this.setState({ ...this.state, imageModalOpen: true })
};
// close the image modal
handleImageClose = () => {
this.setState({ ...this.state, imageModalOpen: false })
};

<Modal
  open={this.state.imageModalOpen}
  onClose={this.handleImageClose}
>
  <DialogContent className={classes.DialogContent}>
    <SelectImageModal saveChosenImage={this.saveChosenImage} closeModal={this.handleImageClose}/>
  </DialogContent>
<modal>

saveChosenImage = (image) => {
  this.setState({ ...this.state, imageChosen: image })
};

Answer 1

试试这样。

CHILD COMPONENT

useSelectedImage = () => {
   this.props.saveChosenImage(this.state.imageChosen);
-  this.props.closeModal();   //remove this
};
...

PARENT COMPONENT
...
saveChosenImage = (image) => {
  this.setState({ ...this.state, imageChosen: image, imageModalOpen: false }); // modified here
};

Answer 2

您可以在另一个内部调用一个 function。 这样，您就可以保持方法的纯度。 您仍然可以在关闭按钮上重用handleImageClose而无需选择图像。

请参阅代码框https://codesandbox.io/s/sweet-torvalds-3dyv5上的示例

import React, { Component } from "react";
import ReactDOM from "react-dom";

const Child = props => {
  const useSelectedImage = () => {
    console.log("clicked");
    // DO THIS
    return props.closeModal(props.saveChosenImage(props.theImage));
  };

  return (
    <div>
      <button onClick={useSelectedImage}>Select Image</button>
      <button onClick={props.closeModal}>Cancel</button>
    </div>
  );
};

class Parent extends Component {
  openImageModal = () => console.log("OPEN FIRED");

  handleImageClose = () => {
    console.log("CLOSED FIRED");
    this.setState({ closed: true });
  };

  saveChosenImage = image => {
    console.log(`SAVED!! ${image}`);
    this.setState({ image });
  };

  render() {
    console.log(this.state);

    return (
      <Child
        saveChosenImage={this.saveChosenImage}
        closeModal={this.handleImageClose}
        theImage="cow.jpg"
      />
    );
  }
}

function App() {
  return (
    <div className="App">
      <Parent />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);