Как создать динамическую таблицу c React, которая также управляет файлом динамической c JSON? - PullRequest
Новая
       4

Как создать динамическую таблицу c React, которая также управляет файлом динамической c JSON?

1 голос
/ 05 марта 2020

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

Я основываю свой код на этом (https://codesandbox.io/s/k9r9692m77), который является принятым ответом на сообщение StackOverflow ( Добавить и удалить данные в таблицу - Реагируйте )

Я хотел бы иметь возможность отправлять данные через пользовательский интерфейс с помощью кнопки «Отправить», как показано в примере, и эти данные будут отображаться в таблице пользовательского интерфейса, но я также хотел бы например, данные, которые добавляются в таблицу, также добавляются в файл JSON.

Пример:

Есть два поля: одно для ПОЛЬЗОВАТЕЛЬ и одно для EMAIL , поэтому для двух записей Я бы получил таблицу, подобную приведенной ниже: 

|------------------|-------------------|------------------|
|       USER       |      EMAIL        |       Actions    |
|   Bennie Factor  | bennie@factor.com |       Delete     |
|   Horace Cope    | horace@cope.com   |       Delete     |     
|------------------|-------------------|------------------|

, которая затем выдаст JSON, который будет выглядеть примерно так: 

{"data": [
    {"name": "Bennie Factor", "email": "bennie@factor.com"},
    {"name": "Horace Cope", "email": “horace@cope.com"}
]}

Если бы я затем добавил пользователя Джея Уокера с по электронной почте jay@walker.com и нажмите кнопку отправить, новая таблица и json будут: 

|------------------|-------------------|------------------|
|       USER       |      EMAIL        |       Actions    |
|   Bennie Factor  | bennie@factor.com |       Delete     |
|   Horace Cope    | horace@cope.com   |       Delete     |
|   Jay Walker     | jay@walker.com    |       Delete     |     
|------------------|-------------------|------------------|

И: 

 {"data": [
    {"name": "Bennie Factor", "email": "bennie@factor.com"},
    {"name": "Horace Cope", "email": “horace@cope.com"},
    {"name": "Jay Walker", "email": “jay@walker.com"}
]}

Процесс будет:

  1. Вы вводите данные в соответствующие поля
  2. Нажмите «Отправить», и эти данные затем отобразятся в таблице, а также будут добавлены в JSON файл

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

Пожалуйста, дайте мне знать, если для уточнения моего вопроса требуется дополнительная информация.

1 Ответ

2 голосов
/ 12 марта 2020

Все, что происходит в JS, по умолчанию хранится в памяти, а не записывается в какой-то «файл» на диске. По соображениям безопасности веб-браузеры обычно не имеют доступа на запись к локальному диску пользователя, если явно не предоставлено взаимодействием с пользователем .

Вы можете разрешить пользователю загружать эти данные в памяти в .json файл на диске, нажав кнопку. Хитрость заключается в том, чтобы сгенерировать ссылку dataURI на лету: 

class App extends Component {

  // ...

  saveAsFile() {
    const str = JSON.stringify(this.state.people);
    const dataUri = "data:text/json," + str;
    const link = document.createElement("a");
    link.download = "table.json";
    link.href = dataUri;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  }

  render() {
    return (
      <div>
        ...
        <button onClick={this.saveAsFile.bind(this)}>download</button>
      </div>
    )
  }
}

Демонстрация: https://codesandbox.io/s/async-cherry-0tke6

Другой вариант - использовать собственную файловую систему API . Но я не буду вдаваться в подробности, потому что это все еще эксперимент, а не веб-стандарт.

...