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，我想获取所选选项的Value并调用另一个组件，该组件将从API中获取的数据创建一个表

任何线索请告诉我

谢谢

Answer 1

通过反应，您可以通过多种方式将数据传递给组件，这在很大程度上取决于应用程序的使用和复杂性。

如果您有许多需要了解其他组件的状态/数据的组件，您应该查看flux或redux等应用程序架构。 Facebooks Flux

对于某些应用程序，完整的数据流架构可能过度，因此取决于您如何设计组件。一种常见的模式是让一个组件处理应用程序的状态/交互性。您的主要组件将保留您应用的所有业务逻辑，并将功能传递给其子级，例如改变状态。您可以在Facebook thinking react

了解更多相关信息

我做了一个小问题来解决你的挑战：

Fiddle

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} />
  );
}

如何在ReactJS中的onChange函数内加载另一个组件

1 个答案: