Question

我正在做一个反应应用程序和id我想知道如何考虑多重网站。实际上，我正在做一名课程搜索者，我是搜索者;我使用routie来渲染呈现页面的不同组件。问题是它们并不是由层次结构相关联的，因此呈现结果的组件无法访问ajax数据。我已经徒劳地尝试使用js var数据但是没有var数据但是没有我也一样。我读过https://facebook.github.io/react/tips/communicate-between-components.html 但我不知道如何处理自己的事件系统。如果有人可以说明本文档的最后一段，那么对于这种情况下的所有人来说都是很好的。

var data = {}; 

var CourseSearcher = React.createClass({
    getInitialState: function(){
    return {
   return {  places: '',
      branch: 0,
      dayOfMonth: '',
      timeStart: '',
      timeEnd: '',
      data: []};
    },;
  },
  handlePlacesChange: function(e){
        this.setState({places: e.target.value});
    },
    handleBranchChange: function(e){
        this.setState({branch: e.target.value});
    },
    handleDayOfMonthChange: function(e){
        this.setState({dayOfMonth: e.target.value});
    },
    handleTimeStartChange: function(e){
        this.setState({timeStart: e.target.value});
    },
    handleTimeEndChange: function(e){
        this.setState({timeEnd: e.target.value}); 
    },
    handleSubmit: function(e){
        // stop the default browser action
        e.preventDefault();
        // Do an ajax post
        $.ajax({
            url:'php/results.php',
            dataType: 'json',
            type: 'GET',
      data: {
       data: {places: this.state.places,
        branch:this.state.branch,
        dayOfMonth:this.state.dayOfMonth,
        timeStart:this.state.timeStart,
        timeEnd:this.state.timeEnd},
      },
      success: function(data){
                this.setState({data: data});
        data = this.state.data; 
        routie('results');
            }.bind(this),
            error: function (xhr,status,err){
                console.error('php/results.php',status,err.toString());
            }.bind(this)
        });
    },
    render: function(){
      return(
        <div>
          <form method="get" onSubmit={this.handleSubmit}>
            <label>Où?</label>
            <input 
                type="text" 
                placeholder="Lieux" 
                value={this.state.places} 
                onChange={this.handlePlacesChange} 
            />
            <label>Quoi?</label>
            <select value={this.state.branch} onChange={this.handleBranchChange}>
              <option>Matière</option>
              <option>Français</option>
              <option>Anglais</option>
            </select>
            <label>Quand ?</label>
            <input 
            type="date" 
            value={this.state.dayOfMonth} 
            onChange={this.handleDayOfMonthChange} 
            /> 
            <input 
            type="time" 
            value={this.state.timeStart} 
            onChange={this.handleTimeStartChange}
            /> - 
            <input 
            type="time" 
            value={this.state.timeEnd} 
            onChange={this.handleTimeEndChange}/>
            <button type="submit">Go!</button>
          </form>
        </div>
        );
    }
}); 

console.log(data); 

var ResultList = React.createClass({
  render: function() {
      console.log(data);
      return(
      <h1>Hello</h1>);
    }
);
  }
});

var ResultBox = React.createClass({
  render: function() {
    return (
        <div>
          <h4>{}</h4>
        </div>
      );

      }
});

routie({
        '':function() {
          React.render(<CourseSearcher />,
              document.getElementById('content'));
        },
        'results': function() {
    React.render(
      React.render(<ResultList results={data} />,
            document.getElementById('content'));
        }
      });

使用反应路由器做得很好;）

Answer 1

我已经使用react路由器完成了它，其中组件与某些专用URL相关

反应多项，组件数据传递

1 个答案: