提交

Question

繼後反應JS顯示的數據是我的反應，它接受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

你需要做到以下幾點：

1. 的<select>元素定義一個onChange處理程序。

   <select onChange={this.handleChange}> 
   

2. 將事件處理程序添加到您的組件定義中，並使用它來更改組件實例的狀態。

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

3. 在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] 
       }