反應呈現html表格和從html表格中讀取

Question

這是一個概念性問題，我試圖理解處理反應中表格數據的最佳方式，而不使用任何特殊組件或庫。

我在我的子組件中動態創建的html表中有數據。數據來自父組件。某些列具有可編輯的內容，我可以通過編輯按鈕觸發，以重新呈現具有可編輯列的所有行的內嵌文本框的表格版本。

當我更改文本框的內容時，我希望能夠點擊我的保存按鈕並保存所有行。

保存和編輯按鈕不是在表格上內聯，而是坐在我的組件的表格外。

如何從父組件中訪問我的子組件中的html表以讀取所有行並將文本框中的值保存到數據存儲區？

這裏是我試圖動態構建選擇列表的代碼片段。我遇到了一些語法錯誤，並且它不工作，但它提供了我想要做的事情的一個概念。

我正在傳入類別和事務ID。我想在選擇編輯模式時將選擇列表添加到表格中每行的每個類別單元格中。事務標識是我的解決方案，通過將1添加到事務標識來讓列表中的當前行的索引可用。然後，我將使用選定的索引-1來獲取用於更新相應記錄類別的事務標識。這可能是一種黑客行爲，但我想不出將事務鏈接到選擇列表的正確方式或更好的方式。

renderCategory(category,transid){ 

    console.log(category); 

    if (this.props.editMode === true){ 

    return <div> 
     <select id="selCategory" onChange={this.props.onCategoryChange}> 

    const arrCategory = ["Category1","Category1","Category2","Category3","Category4","Category5","Category6","Category7"]; 

      var i; 

      for (i = 1;arrCategory.length+1;i++){ 

      <option value={transid+1}>{arrCategory[i-1]}</option> 

      if(arrCategory[i-1] === category) { 
       selectedIndex = i-1; 
      } 
      } 
     </select> 
     </div> 
    } 
    else { 
     return category 
    } 
    } 

在這裏，我有父母的代碼來處理我的孩子選擇列表的onChange事件。

handleCategoryChange(e) { 

     // this will have to be changed because I'm using the index value to store the transaction id 

     alert("The Child HTML is: " + e.target.innerHTML + "The selected value is: " + e.target.options[e.target.selectedIndex].value); 


     //// update the date which is in parent state to reflect the new value for category for the passed in transaction id (the problem is I don't know what the transaction id is...) 

     } 

Answer 1

要做到這一點，你需要做以下

在你父組件：

• 保持你的父組件的狀態，將存儲有可能成爲數據呈現在子組件中。

• 在父組件中編寫一個函數，它將更新狀態（即要在子組件中呈現的數據）。

• 然後通過道具將父組件的狀態和狀態更新函數中的數據傳遞給子組件。

在你的子組件：

• 檢索數據，並通過父組件從子組件的道具傳遞的功能。

• 使用數據來填充您的表格和每個可編輯框的輸入，傳遞onChange併爲其提供從父組件傳遞的函數的引用。

這裏是一個小片段採取從參考：

class Parent extends Component { 

    constructor() { 
     super() 
     this.state = { 
      data: '' 
     } 
    } 

    //update your state here 
    stateUpdateHandler = (value) => {    
     this.setState({data: value}) 
    } 

    render() { 
     return(
      <Child data={this.state.data} stateUpdateHandler={stateUpdateHandler} /> 
     ) 
    } 

} 


class Child extends Component { 

    render() { 
     const {data, stateUpdateHandler} 
     return(
      <div> 
       <input 
        type='text' value={d.value} 
        onChange={(e) => stateUpdateHandler(e.target.value)} /> 
      </div> 
     ) 
    } 

} 

編輯：這是如果你想獲得交易，你應該如何處理onChange事件

onCategoryChange: function(event) { 
    console.log(event.target.value) //This would have the value of transaction provided in the value attribute of option tag 
} 

id而不是選項標籤的value屬性中的值，則必須更改您的選擇標籤並將其寫入像這樣：

<select id="" onChange={function() {this.props.onCategoryChange(transid)}}>