Question

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

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

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>
        ) : (
        <div>
          <FadeIn transitionDuration = {1000}><h1>Disclaimer</h1></FadeIn>
          <FadeIn transitionDuration = {1000}><p>Disclaiming</p></FadeIn>
          <button onClick={this.onButtonClick}>Continue</button>
//button code
        </div>
        )}
      </div>
    );
  }
}

Answer 1

问题是this。您需要像这样在构造函数中绑定函数：

this.onButtonClick= this.onButtonClick.bind(this)

此处的更多信息https://reactjs.org/docs/handling-events.html

Answer 2

子组件中不需要

onButtonClick()，您可以将props函数直接传递给按钮

<button onClick={this.props.onButtonClick}>Continue</button>

父母通过儿童使用功能的问题

2 个答案: