Question

我正在执行Ajax请求，并以表格的形式在组件中显示数据。从同一个组件中我获取click上的数据（handleClick函数获取id数据），以便将其用于另一个组件中的另一个Ajax请求。我从React-Router调用所有组件。问题是我需要点击的信息将其用作我在执行路由的组件内执行的调用的属性。有没有办法从那里访问它？

CompTable组件显示数据表。

var CompTable = React.createClass({

 propTypes: {
  compData:   React.PropTypes.array.isRequired
 },

 getInitialState: function() {
  return {id: ''};
 },

 handleClick: function(e) {
  this.setState({id:e})
 },

 render: function() {

  var list = this.props.compData.map(function (comp, i) {
   return (
    <tr key={i+1}>
     <th scope="row">{i+1}</th>
      <td className={comp.id} onClick={this.handleClick.bind(this, comp.id)}> <Link to={'/competitions/'+comp.league}> {comp.caption} </Link></td>
      <td>{comp.league}</td>
      <td>{comp.numberOfTeams}</td>
     </tr>
    );
   }, this);

这是路由组件：

var app = document.getElementById('app');

var TeamsWrapper = React.createClass({
 render: function () {
  return (
   <div>
    <Teams id={CompTable.handleClick} />
   </div>
  );
 }
});

var CompetitionsWrapper = React.createClass({
 render: function () {
  return (
   <div>
    <Competitions source="http://api.football-data.org/v1/competitions/?season=2016" />
   </div>
  );
 }
});

ReactDOM.render(
 <Router history={browserHistory}>
  <Route path='/' component={Layout}>
   <IndexRoute component={Home}></IndexRoute>
   <Route path='/competitions' component={CompetitionsWrapper}></Route>
   <Route path='/competitions/:teamLeague' component={TeamsWrapper} ></Route>
  </Route>
 </Router>, app);

<Teams id={CompTable.handleClick} />不起作用。任何帮助将受到高度赞赏。谢谢！

Answer 1

要实现这一点，您必须将状态移动到组件，这将解决路由问题。（你现在没有这样的顶级组件，所以你必须创建一个）在同一个组件中你必须定义你的handleClick函数，然后你可以作为道具传递给CompTable。

然后，当触发handleClick时，您在顶级组件中设置了set，因此您可以自由传递所需的 id 以在API调用中使用它。

如何从路由器访问组件方法

1 个答案: