如何在ReactJS的onChange函數中加載另一個組件

Question

我有以下代碼

var SelectOption = React.createClass({

  getInitialState: function() {
    return {
      data: []
    };
  },

  handleemployeeChange: function() {
        alert('sssss');

  },

  loadOptionfromServer: function() {
    $.ajax({
      url: this.props.url,
      dataType: 'json',
      cache: false,
      success: function(data) {
        this.setState({
          data: data
        });
        console.log(data);
      }.bind(this),
      error: function(xhr, status, err) {
        console.error(this.props.url, status, err.toString());
      }.bind(this)
    });
  },

  componentDidMount: function() {
    alert('sssss');
    this.loadOptionfromServer();
    //setInterval(this.loadCommentsFromServer, this.props.pollInterval);
  },


  render: function() {
    return ( < SelectOptionList data = {
        this.state.data
      }
      />
    );

  }
});

var SelectOptionList = React.createClass({

  render: function() {
    var commentNodes = this.props.data.map(function(list) {
      return ( < Addcontenttoselect id = {
          list.emp_ide_id
        }
        option = {
          list.emp_name
        } >
        < /Addcontenttoselect>
      );
    });
    return ( < select id = "select1"
      className = "form-control"
      data - placeholder = "Basic Select2 Box"
      onChange = {
        this.handleemployeeChange
      } > {
        commentNodes
      } < /select>
    );
  }
});

var Addcontenttoselect = React.createClass({
  render: function() {
    return ( < option value = "{this.props.id}" > {
      this.props.option
    } < /option>);
  }
});

ReactDOM.render( < div className = "col-md-3" > < h3 > Select Employee to Review < /h3><SelectOption  url="/appraisal / employeelist " pollInterval={70000}  /></div>, document.getElementById('select-box'));

因此，此組件在瀏覽器中創建一個Select Tag，我想獲取selected選項的Value並調用另一個組件，該組件將根據從API獲取的數據創建表格

任何線索請讓我知道

謝謝

Answer 1

使用react，您可以通過多種方式將數據傳遞到組件，這在很大程度上取決於應用程序的使用和復雜性。

如果您有很多組件需要了解另一個組件的狀態/數據，則應查看諸如flux或redux之類的應用程序體系結構。 Facebook的助焊劑

對於某些應用程序而言，完整的數據流體系結構可能會顯得過高，因此這取決於您設計組件的方式。 一種常見的模式是讓一個組件處理應用程序的狀態/交互性。 您的主要組件將保留您應用程序的所有業務邏輯，並將功能傳遞給其子級，例如更改狀態。 您可以在此處閱讀有關此內容的更多信息Facebook思考

我做了一些小提琴來解決您的挑戰：

小提琴

var Select = React.createClass({
render: function() {
var selectOptions = this.props.options.map(function(optionData) {
    return (
    <option key={optionData.id} value={optionData.id}>
        {optionData.name} 
    </option>
  );
});

return (
    <select 
    id="select1"
    className="form-control" 
    placeholder="Basic Select2 Box"
    onChange={this.props.onChange}
    > 
     { selectOptions } 
    </select>
   );
 }
});


  var SelectApp = React.createClass({
  // The main component holds the data
  getInitialState: function() {
  return {
    data: [],
    currentData: null
  }
},

componentDidMount: function () {
  this.loadOptions();
},

loadOptions: function () {
  var _this = this;
  return setTimeout(function() {
    _this.setState({data: [
    {
        id: 1,
      name: 'Foo Bar'
    },
    {
        id: 2,
      name: 'Bar Foo'
    }
  ]});
  }, 2000);
},

onChange: function (e) {
  var employeeId = e.target.value,
    _this = this,
    mockedData = [
    {
        id: 1,
      data: 'Good employee'
    },
    {
        id: 2,
      data: 'Not so good employee'
    }
  ];

// Mocking an additional data fetch
setTimeout(function () {
    var result = mockedData.find(function (employeeData) {
    return (employeeData.id == employeeId);
  });

  _this.setState({
    currentData: result
  });
}, 2000);

},

renderResult: function () {
if (this.state.currentData) {
    return (
    <div>
                <h4>Employee:</h4>
      <p>{this.state.currentData.data}</p>
    </div>
  );
}

return;
},

render: function() {
return (
  <div>
    <div>
      <h3> Select Employee to Review </h3>
      <Select url={this.props.url} options={this.state.data} onChange={this.onChange}/>
    </div>
            {this.renderResult()}
  </div>
 );
}
});

ReactDOM.render(<SelectApp url="/appraisal / employeelist " pollInterval={70000} />, document.getElementById('container'));

編輯：

renderResult: function () {
if (this.state.currentData) {
    return (
     <loadUserAppraisal url="something" empid={this.state.currentData.id} />
  );
}