Question

所以我有一个具有表的react组件，这些行是从服务器加载的。它还有一个Modal组件，显示所选元素的详细信息。现在，当选择一行时，它在状态上被设置为选中，并且模态在显示时接收所选项目的任何内容。这会导致一些麻烦，原因有两个：最近点击的项目并不总是按时间设置为选择，并且当从服务器重新加载数据时（每分钟一次），因为没有项目，所以不能选择项目。

我想要做的是让每个项目在单击时打开具有其属性的模态。

我尝试在表格中添加回调，如：

var StripedTable = React.createClass ({
  handleClick(index) {
    console.log(this.props.callback)
    if(this.props.callback)
      return this.props.callback(index);
  },

  render() {
    return (
      <table className="table table-striped">
        <thead>
        <tr>
          {this.props.headings.map((heading) => {
            return <th key={newId()}>{heading}</th>
          })}
        </tr>
        </thead>
        <tbody>
        {this.props.rows.map((row, index) => {
          return (<Tr key={newId()} row={row} onClick={this.handleClick.bind(this, index)}/>)
        })}
        </tbody>
      </table>
    )
  }
})

这会记录绑定方法，该方法只是将索引打印到控制台，但打印不会发生。这是主要组件的渲染：

  render() {
    return (
      <Row>
        <Col size="12">
          <Panel>
            <PanelHeading heading="Monitoreo"/>
            <PanelBody>
              <Row><ProgressBar value={routePercentage} text={delayedText}/>
              </Row>
              <StripedTable rows={rows} headings={tableHeadings} callback={this.test}/>}
            </PanelBody>
          </Panel>
        </Col>
      </Row>
      <Modal modalId="stopsModal" cancelText="Cancelar" title="Paradas" width="1100" color="#F7F7F7"
             footer={
             <ModalButtons>
               <button type="button" className="btn btn-flat-primary"  data-dismiss="modal">Cerrar</button>
             </ModalButtons>
             }>
        <RouteStops route={this.state.selectedRoute} ref="routeStops"/>
      </Modal>
    )
  }
})

但即使handleClick（）的输出为bound()，也不会调用该函数。我从rows元素中删除了模态和绑定方法，但结果是一样的。

修改添加表和tr组件的工作版本。

TR：

var Tr = React.createClass ({
  propTypes: {
    callback: React.PropTypes.func,  // receives index of item clicked
    index: React.PropTypes.number    // index of item
  },

  handleClick() {
    if(this.props.callback)
      return this.props.callback(this.props.index);
  },

  render() {
    var cells = this.props.row.map((cell) => {
      return <Td key={newId()} text={cell}/>
    })

    return <tr onClick={this.handleClick}>{cells}</tr>
  }
})

表：

var StripedTable = React.createClass ({
  propTypes: {
    callback: React.PropTypes.func,  // receives index of item clicked
  },

  render() {
    return (
      <table className="table table-striped">
        <thead>
        <tr>
          {this.props.headings.map((heading) => {
            return <th key={newId()}>{heading}</th>
          })}
        </tr>
        </thead>
        <tbody>
        {this.props.rows.map((row, index) => {
          return (<Tr key={newId()} row={row} index={index} callback={this.props.callback}/>)
        })}
        </tbody>
      </table>
    )
  }
})

Answer 1

问题很可能出现在你的Tr组件中，请确保使用从StripedTable组件传递的onClick prop

const Tr = React.createClass({
  render() {
    return (
      <tr onClick={ this.props.onClick }>
        <td>things</td>
      </tr>
    );
  }
});

如何将静态数据传递给数组中的组件

1 个答案: