Question

过去两周内JavaScript的新手，正试图通过单击按钮来构建表。使用react-bootstrap / Button和react-bootstrap-table-next库。我正在处理三个文件：

保存页面布局的文件
ReactButton类
表类

我可以在页面上呈现按钮，但是单击时无法呈现表格。在布局页面上，我使用以下按钮构建按钮：

render() {
    return (
      <div>
        <ReactButton
          name="Reset Table"
          onClick={this.buttonClick}
          keyField={{keyField: 'keyField'}}
          products={DataPopulation.sampleData()}
          columns={DataPopulation.getFields()}
          selectRowProp={{mode: 'checkbox'}}
          />
    </div>

按钮代码为：

class ReactButton extends Component {
  constructor(props) {
    super(props);

    this.state = {
      clicked: false
    };

    this.buttonClick = this.buttonClick.bind(this);
  }

  async buttonClick() {
    this.setState({
      clicked: true
    });
    console.log(this.props);

    console.log("Button part")
  }

  render() {
    return (
      <Button
        variant="primary"
        size="lg"
        onClick={this.buttonClick}>
        {this.props.name}
      </Button>
    )
  }
}

export default ReactButton;

单击按钮时，我可以看到传递给Button类的属性（keyField，产品，列等）的日志。然后可以将这些属性传递到表类文件并使其呈现表吗？我想，带有react-bootstrap-table-next库的表代码将是这样的：

class MultiSelectTable extends Component {
  constructor(props) {
    super(props)
  }

...

<BootstrapTable
      keyField= { this.props.keyField }
      data={ this.props.products }
      columns={ this.props.columns }
      selectRow={ this.props.selectRowProp }
      />

但是我不确定从主布局页面调用该流程应该如何。我应该从Button类中调用表构建吗？而我将如何渲染表格？

编辑：当前正在审查this以获得更多有关此信息。似乎需要逻辑：页面呈现按钮，单击该按钮呈现表。引用和构建层次结构组件的首选最佳实践是什么？

Answer 1

您可以在父组件中执行以下操作：

buttonClick(clicked) {
 this.setState({
  buttonClicked: clicked
 })
}

render() {
    return (
     <>
      <ReactButton
       name="Reset Table"
       onClick={this.buttonClick}
       keyField={{keyField: 'keyField'}}
       products={DataPopulation.sampleData()}
       columns={DataPopulation.getFields()}
       selectRowProp={{mode: 'checkbox'}}
      />
      {this.state.buttonClicked ? <MultiSelectTable {...props} /> : null}
     </>
    )
 }

然后在按钮组件中，将点击状态传递回父组件的click函数：

 buttonClick() {
   this.props.onClick(true);
 }

这样，您可以确保仅在单击按钮并将所有道具传递到表格组件时才渲染表格。

通过单击按钮构建表

1 个答案: