Обновление данных в пользовательском интерфейсе таблицы React Material - PullRequest
Новая
       6

Обновление данных в пользовательском интерфейсе таблицы React Material

0 голосов
/ 23 января 2019

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

<TableCell>
     <TextField id="standard-bare" defaultValue={items.data[i].firm} margin="normal" />
</TableCell>

Тогда у меня есть иконка ниже, прямо в каждой строке 

<IconButton onClick={() => this.UserEdit(items.data[i])}>
     <Check color="action" />
</IconButton>

, поэтому, когда пользователь нажимает галочку выше, активируется функция ниже. 

UserEdit(id) {
    console.log(id);
}

Так что в идеале мне нужно получить все новые значения для этих полей, чтобы я мог выполнить вызов API для обновления базы данных этой информацией. Прямо сейчас, каждый раз, когда я нажимаю на кнопку проверки, я получаю старые значения (значения, которые имели эти поля при первой загрузке). Как я могу получить новые значения?

Ответы [ 2 ]

0 голосов
/ 24 января 2019

Чтобы отслеживать новые / обновленные значения, вы можете рассмотреть следующий подход:

1) ввести состояние rowsChanges и установить его пустым, чтобы отслеживать новые / обновленные значения в таблице компонент

2) после изменения значения в текстовом поле сохраните его значение вместе с именем поля и индексом строки в rowsChanges состоянии: 

handleTextFieldChange(rowIndex,change) {
    this.setState(prevState => ({
      rowsChanges: {
        ...prevState.rowsChanges,
        [rowIndex]: {...prevState.rowsChanges[rowIndex],[change.fieldName]: change.fieldValue}
      }
    }));
  }

где 

<EditableTableCell
      row={row}
      fieldName="name"
      onCellValueChange={this.handleTextFieldChange.bind(this,index)}
/>

, где EditableTableCell - это пользовательский компонент, представленный для извлечения значения поля из TextField при событии изменения: 

const EditableTableCell = ({ row, fieldName, onCellValueChange }) => {
  const handleTextFieldChange = e => {
    onCellValueChange({
      fieldValue: e.target.value,
      fieldName: fieldName
    });
  };

  return (
    <TableCell>
      <TextField
        onChange={handleTextFieldChange}
        id={fieldName}
        defaultValue={row[fieldName]}
        margin="normal"
      />
    </TableCell>
  );
};

3) и, наконец, после нажатия кнопки сохранения, сохранить изменения в БД: 

handleSave(rowIndex) {
    const rowChanges = this.state.rowsChanges[rowIndex];
    console.log("Save row changes into db...")
    //clear row changes...
    this.setState(prevState => ({
      rowsChanges: {
        ...prevState.rowsChanges,
        [rowIndex]: {}
      }
    }));
}

Вот демо (форк Простой пример таблицы )

0 голосов
/ 23 января 2019

Вы можете хранить данные в состоянии и обновлять состояние компонента, а затем использовать состояние для отправки данных на сервер.Вы можете сохранить массив данных и изменить данные в состоянии на основе идентификатора.

Один из способов - показать форму редактирования, в которой будет текстовое поле для обновления данных.например, 

class MyComponent extends React.Component {
state = {
data: ['data1', 'data2'] etc
}
// onChange method call on the field change of edit modal
handleChange(event, id) {
  const { data } = this.state;
  data[id] = event.target.value;
  this.setState({data})
}
// in render method. i will be from loop
<input value={this.state.data[i]} onChange={(e) => this.handleChange(e, id)}

Вы также можете использовать метод onChange для полей таблицы

...