如何渲染選擇IN IN ReactJs中的Table onChange

Question

我有這樣的選擇選項代碼

var SelectOption = React.createClass({

  getInitialState: function() {
    return {
      data: [],
      empid: null
    };
  },
  componentDidMount: function() {
    //this.loadOptionfromServer();
    //setInterval(this.loadCommentsFromServer, this.props.pollInterval);
  },

  onChange: function(e) {
    var employeeId = e.target.value;
    if (employeeId == 1) {
      this.setState({
        empid: 'xxx'
      });
    } else {
      this.setState({

        empid: employeeId
      })
    }

    this.renderTable();
  },

  renderTable: function() {

    < Tableforbasictask data = {
      data
    }
    />

  },

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

  }
});

var SelectOptionList = React.createClass({

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


  render: function() {

    return ( < select id = "select1"
      className = "form-control"
      data - placeholder = "Basic Select2 Box"
      onChange = {
        this.props.onChange
      } > < option value = "1" > Select Employee < /option> < option value = "2" > Some Value < /option><option value="3">Some Value</option > < option value = "4" > Some Value < /option></select >
    );
  }
});

ReactDOM.render( < div className = "row" > < SelectOption / > < /div > , document.getElementById('content'));

然后我有一個Table COmponent

var data = [{
  id: 1,
  taskName: "Pete Hunt",
  standarDescription: "This is one comment",
  emplComment: "meaaow I am meeawo",
  empRating: "1"
}, {
  id: 2,
  taskName: "Pete Hunt",
  standarDescription: "This is one comment",
  emplComment: "meaaow I am meeawo",
  empRating: "1"
}, {
  id: 3,
  taskName: "Pete Hunt",
  standarDescription: "This is one comment",
  emplComment: "meaaow I am meeawo",
  empRating: "1"
}, {
  id: 4,
  taskName: "Pete Hunt",
  standarDescription: "This is one comment",
  emplComment: "meaaow I am meeawo",
  empRating: "1"
}, {
  id: 5,
  taskName: "Pete Hunt",
  standarDescription: "This is one comment",
  emplComment: "meaaow I am meeawo",
  empRating: "1"
}];


var Addcontenttotable = React.createClass({
render: function() {
  return ( < tr > < td > {
      this.props.taskName
    } < /td> < td > {
    this.props.standarDescription
  } < /td> < td > {
  this.props.emplComment
} < /td> < td > {
this.props.empRating
} < /td> < /tr > );
}
});

var TableforbasictaskList = React.createClass({
      render: function() {
        var commentNodes = this.props.data.map(function(comment) {
          return ( < Addcontenttotable taskName = {
              comment.taskName
            }
            standarDescription = {
              comment.standarDescription
            }
            emplComment = {
              comment.emplComment
            }
            empRating = {
              comment.empRating
            }
            key = {
              comment.id
            } >
            < /Addcontenttotable>
          );
        });
        return ( < tbody > {
            commentNodes
          } < /tbody>);
        }
      });

    var Tableforbasictask = React.createClass({
      getInitialState: function() {
        return {
          data: this.props.data
        };
      },
      handleSubmit: function(comment) {
        comment.id = this.state.data.length + 1;
        this.setState({
          data: this.state.data.concat(comment)
        });
      },
      render: function() {
        return ( < div className = "downloadlinks" >
          < table className = "table table-bordered table-striped-col nomargin"
          id = "table-data" >
          < thead >
          < tr align = "center" >
          < td > Task Name < /td> < td > Standard Discription of Task < /td > < td > Employee Comment < /td> < td > Employee rating < /td > < /tr> < /thead >

          < TableforbasictaskList data = {
            this.state.data
          }
          />  < /table >
          < /div>
        );
      }
    });

我只是在選擇標簽中的一個選項被更改時才嘗試渲染表格。

但它沒有發生

這里是小提琴的鏈接

Answer 1

首先，我沒有得到你想要做的事情的要點，但肯定你的功能：

  renderTable: function() {
     <Tableforbasictask data = {data}/>
  }

需要返回組件，所以它應該像：

  renderTable: function() {
     return <Tableforbasictask data = {data}/>
  }

另外，在onChange事件中，您調用renderTable ，您不需要這樣做， setState將自動調用將調用renderTable的組件的render方法。