让孩子使用父母传递的功能的问题

Question

我试图在子类中设置一个按钮，在我的父类上使用 setState。但是，它不起作用，我不确定为什么。当我单击按钮时，我收到一个类型错误，说它无法读取未定义的属性“道具”。

这是我的父母代码，我省略了不相关的代码：

onButtonClick() {

      this.setState({showingLoadingScreen: false})

  }

//unrelated code between

render() {

    return (

    <div>

      <header className="App-header">

        <Loading visible={this.state.showingLoadingScreen} onButtonClick={this.onButtonClick} />

      </header>

      <Map

//unrelated code between

这是我给孩子的代码，按钮代码标有注释：

//import statements

const defaultOptions = {

  loop: true,

  autoplay: true,

  animationData: loaderData.default,

  rendererSettings: {

    preserveAspectRatio: "xMidYMid slice"

  }

};

const defaultOptions2 = {

  loop: false,

  autoplay: true,

  animationData: doneData.default,

  rendererSettings: {

    preserveAspectRatio: "xMidYMid slice"

  }

};

export default class Loading extends Component {

  constructor(props) {

    super(props);

    this.state = {

      done: undefined

    };

  }

  onButtonClick() {

    this.props.onButtonClick();

  }

//button code

  componentDidMount() {

    setTimeout(() => {

      fetch("https://jsonplaceholder.typicode.com/posts")

        .then(response => response.json())

        .then(json => {

          this.setState({ loading: true });

          setTimeout(() => {

            this.setState({ done: true });

          }, 1000);

        });

    }, 2000);

  }

  render() {

    return (

      <div>

        {!this.state.done ? (

          <FadeIn> 

            <div class="d-flex justify-content-center align-items-center">

              <h1>Rendering Data</h1>

              {!this.state.loading ? (

                <Lottie options={defaultOptions} height={120} width={120} />

              ) : (

                <Lottie options={defaultOptions2} height={120} width={120} />

              )}

            </div>

          </FadeIn>

        ) 

Answer 1

问题是this。您需要像这样在构造函数中绑定函数：this.onButtonClick=&nbsp;this.onButtonClick.bind(this)更多关于这里https://reactjs.org/docs/handling-events.html

Answer 2

onButtonClick()在子组件中是不必要的，您可以直接将道具功能传递给按钮<button&nbsp;onClick={this.props.onButtonClick}>Continue</button>