Как использовать setState для глубоко вложенной переменной - PullRequest
Новая
       34

Как использовать setState для глубоко вложенной переменной

0 голосов
/ 11 июля 2020

В настоящее время я сохраняю таблицу в this.state, как вы можете видеть здесь 

this.setState({    
      table: 
        <div  id='link-table' className="table-panel-table" style={{ width: "100%" , height: height - 35, overflow:'auto' }}>
          {columns}
          {rows}
        </div>      
    });

Затем переменная table напрямую используется в функции рендеринга для отображения на веб-сайте: 

render(){ return (this.state.table) }

(Если по какой-то причине это плохая идея, пожалуйста, сообщите мне)

Проблема, с которой я сейчас сталкиваюсь, заключается в том, что я хочу превратить одну из ячеек в поле ввода (и, очевидно, элемент формы над ним), когда вы нажимаете на него. Я хотел бы знать, как лучше всего изменить this.state.table, чтобы он запускал повторную визуализацию, когда я меняю ячейку.

Если я использую это, это не работает 

this.state.table.props.children[1][row].props.children[cell].props.children = form_element;

Насколько я понял, мне нужно использовать this.setState(), чтобы изменить его соответствующим образом, но мне трудно написать код для таргетинга на указанную c вложенную переменную в this.state.table.

Я получил 

const { table } = this.state;
let temp_table = {...table, props: {...table.props, children: [...table.props.children]}}

но затем застреваю, потому что я не знаю, как продолжить с .children[1][row]

1 Ответ

0 голосов
/ 11 июля 2020

Вам не нужно сохранять таблицу в состоянии, вы можете просто хранить данные строк и столбцов, чтобы вам не приходилось искать элемент внутри таблицы. Не храните элементы jsx в состоянии, просто сохраняйте данные для создания представления. 

render(){ 
  return (
    <div  id='link-table' className="table-panel-table" style={{ width: "100%" , height: height - 35, overflow:'auto' }}>
      {generateColumns(this.state.columns)}
      {generateRows(this.state.rows)}
    </div>      
)

}

Вам также не следует напрямую манипулировать элементами dom, чтобы изменить их внешний вид. React создает элементы в соответствии с их состоянием и отображает различные компоненты в соответствии с их состоянием. Я не знаю, как вы генерируете строки и столбцы, но следующий подход может дать представление: 

generateRows= (rows) => {

  return rows.map(row => { 
    if(row.shouldHaveFormElement) {
        return <RowComponentWithFormElement></RowComponentWithFormElement>
    }else {
        return <NormalRowElement></NormalRowElement>
    }
}

}

...