React 渲染 html 表并从 html 表中读取

Question

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

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

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

保存和编辑按钮不是内嵌在表格中，而是位于我的组件中的表格之外。

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

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

我正在传递类别和交易 ID。 I want to add the select list to each category cell in every row in my table when the edit mode is selected.事务 id 是我通过在事务 id 上加 1 使当前行的索引在列表中可用的解决方案。然后，我将使用选定的索引 - 1 来获取用于更新相应记录类别的事务 ID。这可能是一个 hack，但我想不出将交易链接到选择列表的正确方法或更好的方法。

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 并向其提供从您的父组件传递的函数的引用。

这里有一个小sn-p可供参考：

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)}}>