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

Question

我有一个动态创建的表，并尝试在其上添加完整的 CRUD 功能。出于商业原因，我无法为此使用外部库，因此导致使用基本的 HTML 和 React。我目前正在尝试检测数据中的变化。我的问题是关于标签内带有 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;

Answer 1

问题是，当您的组件在任何时候渲染时，您都会调用 onInput 方法:

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

您必须传递 a 函数，而不是调用它，在这种情况下，您可以传递匿名函数或箭头函数:

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