javascript - 如何防止onInput在动态组件初始化期间触发？

我有一个动态创建的表，正在尝试将完整的CRUD功能放到该表上。由于业务原因，我无法为此使用外部库，因此导致使用带有React的基本HTML。我目前正在尝试检测数据中的更改。我的问题是关于标记中包含div的onInput事件。首次使用数据初始化组件时，将为每个组件触发onInput事件，而不是等待实际的用户输入。在某种程度上，我理解为什么会这样，但是我需要一种解决方法或替代方法。我在下面创建了一个小演示来演示当前代码的模拟：

家长班：

import React, {Component} from 'react';

class FormContainer extends Component{
    constructor(props){
        super(props)
        this.state={
            rowData : myData
        }
        this.onInput = this.onInput.bind(this)
    }

    onInput = (rowKey) => {
        console.log(rowKey)
    }

    render() {
        return(
           <Grid
           data={this.state.rowData}
           onInput={this.onInput}
           />
        )
    }
}

网格类别：

import React, {Component} from 'react';

class Grid extends Component{
    constructor(props){
        super(props)
    }


    render(){
        let columns = [];
        let rows = [];
        if(this.props.data != null){
            columns = this.props.data.slice(0, 1).map((row, i) => {
                return(
                  Object.keys(row).map((column, key) => {
                    return(
                      <th key={key}>{column}</th>
                    )
                  })
                )
                })

            rows = this.props.data.map((row, rowKey) => {
              return(
                  <tr key={rowKey}>
                {Object.keys(row).map((data, cellKey) => {
                  return(
                  <td key={cellKey} suppressContentEditableWarning="true" contentEditable="true" onChange={this.props.onInput(rowKey)}>{row[data]}</td>
                  )
                })}
              </tr>
              )
            })
        }
        return(
            <table>
            <thead><tr>{columns}</tr></thead>
            <tbody>{rows}</tbody>
          </table>
        )
    }
}

export default Grid;

最佳答案

问题在于，任何时候渲染组件时，您都在调用onInput方法：

<td
    key={cellKey}
    suppressContentEditableWarning="true"
    contentEditable="true"
--> onChange={this.props.onInput(rowKey)}>{row[data]}</td>

不必调用它，而必须传递a函数，在这种情况下，您可以传递anonymous function或arrow function：

<td
    key={cellKey}
    suppressContentEditableWarning="true"
    contentEditable="true"
--> onChange={ () => { this.props.onInput(rowKey); } }>{row[data]}</td>