Question

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

我在我的子组件中动态创建的html表中有数据。数据来自父组件。某些列具有可编辑的内容，我使用编辑按钮触发该内容以重新呈现表的版本，该表具有可编辑列的所有行的内联文本框。

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

保存和编辑按钮不是内联在桌面上，而是放在我的组件中的表格之外。

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

这是一段代码，我正在尝试动态构建选择列表。我遇到了一些语法错误的问题而且它无法正常工作，但它会让我知道我正在尝试做什么。

我正在传递类别和交易ID。我想在选择编辑模式时将选择列表添加到表格中每行的每个类别单元格中。事务ID是我通过在事务id中加1来使列表中当前行的索引可用的解决方案。然后，我将使用所选索引-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

要实现此目的，您需要执行以下操作

在您的父组件中：

维护父组件中的状态，该状态将存储必须在子组件中呈现的数据。
在父组件中编写一个函数，它将更新状态（即要在子组件中呈现的数据）。
然后通过props将父组件状态和状态更新功能中的数据传递给子组件。

在您的子组件中：

从子组件的props中检索父组件传递的数据和函数。
使用数据填充表格和每个可编辑框的输入，传递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标记并将其写为：

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

反映渲染html表并从html表

1 个答案: