Question

以下是我的反应代码，它接受json格式数据并打印

          var DataInTableFormat = React.createClass({
                getInitialState: function() {
                    return {
                      phpData: [] //initial value 
                    };//getInitialState
                },//DataInTableFormat 
                componentDidMount: function() {
                    $.get(this.props.source, function(result) { //storing the JSON data in result
                      var collection = JSON.parse(result);  //coverting JSON data to Javascript object
                      console.log(collection);
                      if (this.isMounted()) {//checking for component mount
                        this.setState({
                          phpData: collection

                       });
                      }
                    }.bind(this));
                },

                   render:function()
                    {

                      DBdata = this.state.phpData || [];
                        return (
                        <form>
                        <div>Select ID :
                          <select>
                          {DBdata.map(function(d){
                            return(
                                    <option value={d.id}>{d.id}</option>//prints the all id from the jsondata.php
                                   )}
                          )}
                          </select>
                        <button name="submit">submit</button>
                       </div> 
                       </form>
                )}
          });
          React.render(
            <DataInTableFormat source="http://localhost/PHP-React-Demo/jsondata.php" />,
              document.getElementById('Table-data')
            );

当我选择ID时，我只想在点击提交后以表格格式打印所有细节。

Answer 1

您需要执行以下操作：

在onChange元素上定义<select>处理程序。
```
<select onChange={this.handleChange}>
```

将事件处理程序添加到组件定义中，并使用它来更改组件实例的状态。

handleChange: function (event) {
    this.setState({
        currentId: event.target.value
    });
}

在render()方法中使用该段状态。

render: function () {

    var currentId = this.state.currentId;
    var phpData = this.state.phpData || [];
    var selected = phpData.filter(function (item) {
        return item.id === currentId;
    });

    if (selected.length > 0) {
        // return stuff relating to selected[0]
    }

React JS在提交后显示数据

1 个答案: