Как предотвратить запуск onInput при инициализации компонента Dynami c? - PullRequest
Новая
       6

Как предотвратить запуск onInput при инициализации компонента Dynami c?

0 голосов
/ 27 января 2020

У меня есть таблица, которая была создана динамически, и я пытаюсь использовать на ней все возможности CRUD. По деловым причинам я не могу использовать внешние библиотеки для этого, и поэтому я использовал basi c HTML с реагировать. В настоящее время я пытаюсь обнаружить изменения в данных. Моя проблема в отношении события onInput с div внутри тега. Когда компоненты сначала инициализируются данными, событие 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;

1 Ответ

2 голосов
/ 27 января 2020

Проблема в том, что когда ваш компонент отображается в любое время, вы вызываете свой onInput метод: 

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

Вместо того, чтобы вызывать его, вы должны передать функцию, в этом случае вы можете передать anonymous function или arrow function: 

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