反应呈现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)}}>