Question

我希望result.js中按钮的onClick事件呈现我的Spinner组件，并且到目前为止（有点）能做到这一点。目前，Spinner大多具有一些console.log（）语句，并且它始终记录“ Rendered spinner”。单击按钮后，无休止地大约每秒一次。为了记录，没有显示返回的段落，但是我还没有调试它。另外，我在Result.js中排除了一些我认为不相关的代码。

现在，我只希望Spinner在按下按钮后仅渲染一次。有提示吗？

result.js：

import React, { Component } from "react";
import { connect } from "react-redux";
import Spinner from "./spinner";

class UnboxResult extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showSpinner: false
    };
    this.handleUnboxClicked = this.handleUnboxClicked.bind(this);
  }

  handleUnboxClicked(event) {
    event.preventDefault();
    console.log("Inside handleUnboxClicked");
    this.setState({
      showSpinner: true
    });
  }

  render() {

    return (
      <section className="opening">
        <div className="container">
          <div className="row">
            <button onClick={this.handleUnboxClicked}>UNBOX</button>
          </div>
          <div className="row">
            {this.state.showSpinner ?
              <Spinner items={this.props.unbox.items}/> :
              null}
          </div>
        </div>
      </section>
    );
  }
}

export default connect(state => ({
  unbox: state.unbox
}))(UnboxResult);

spinner.js：

import React, { Component } from 'react';

class Spinner extends Component {
  constructor(props) {
    console.log("Before super");
    super(props);
    console.log("Ran constructor.");
  }

  render(){
    console.log("Rendered spinner.");
    return(
    <p>Spinning..</p>
    );
  }
}
export default Spinner;

Answer 1

您可以添加处理程序方法以从微调框更新状态

handleClick(){
  this.setState({
    showSpinner: true
  })
}

，并且在您的渲染器中，它将需要作为道具传递

<div className="row">
  {this.state.showSpinner ?
    <Spinner handleClick={this.handleClick}/> :
    null}
</div>

在Spinner组件中，您可以使用onclick触发

<button onClick = {this.props.handleClick} > Click </button>

这将使您能够更新父级中的状态，您可能想弄清楚如何在微调器中一次显示一项，并且仅在没有剩余项显示时将状态设置为false。 / p>

对不起，如果我误解了您的评论。

使用onClick不断渲染React组件

1 个答案: