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

Posted 2023-03-15

【中文标题】React 渲染 html 表并从 html 表中读取

【英文标题】：React rendering html table and reading from html table

【发布时间】：2017-04-30 13:44:30

【问题描述】：

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

我在子组件中动态创建的 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...)

      

【参考方案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)>

【讨论】：

太棒了。谢谢。但是，在例如触发 onChange 的元素是嵌套在表格单元格中的选择列表的情况下，如何捕获行索引？子组件中表格的第一个单元格有一个 id 值，它是应该应用更新的行。

我想您将使用map 来循环数据并呈现表格行。在这个 map 函数中，您可以传递第二个参数 index 来获取索引号。 [1,2,3].map(val, index => console.log(index) ) 如果我的解释不清楚，您也可以查看this 答案

我添加了一些示例代码来解释我遇到的问题并给出我遇到的“概念”问题的一些想法。基本上，我如何将行的事务 id 绑定到列表。我不能这样做，因为 onChange 是由列表触发的，并且不包含有关列表所属行/事务 id 的任何信息。

添加了一个编辑。如果我正确理解了问题，这应该会有所帮助

我明白你的建议。让我玩它，看看我能不能解决它。谢谢！