React呈现html表并从html表中读取

Question

这是一个概念性的问题，因为我试图理解在react中处理表格数据的最佳方法，而不使用任何特殊组件或库。

我在子组件中动态创建的html表中有数据。数据来自父组件。有些列具有可编辑的内容，我通过“编辑”按钮触发这些内容，以重新呈现表格的一个版本，该版本包含可编辑列的所有行的内联文本框。

当我更改文本框的内容时，我希望能够单击“保存”按钮并保存所有行。

“保存”和“编辑”按钮不在表中内联，而是位于我的组件中的表外。

如何从父组件访问子组件中的html表以读取所有行并将文本框中的值保存到数据存储？

下面是我试图动态构建选择列表的代码片段。我遇到了一些语法错误的问题，它不起作用，但它给了我一个想法，我想做什么。

我正在传递类别和交易标识。当选择编辑模式时，我想将选择列表添加到表中每行的每个类别单元格中。事务id是我的解决方案，通过向事务id添加1，使当前行的索引在列表中可用。然后，我将使用选定的index-1获取用于更新相应记录类别的事务ID。这可能是一个黑客，但我想不出正确的方式或更好的方式将交易链接到选择列表。

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，而不是option标记的value属性中的值，则必须更改select标记并按如下方式写入：

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