Каковы лучшие практики для работы с формами в ReactJS?

EDIT: Я знаю, что OP запросил ответ, который выполняет задачу в одной транзакции, но я думаю, что код полезен людям.

Все ответы используют PasswordHasher напрямую, что не очень хорошо поскольку вы потеряете некоторые испеченные функциональные возможности (валидация и т. д.).

Альтернативой (и я бы предположил, что рекомендуемый подход) является создание токена сброса пароля, а затем использование этого для изменения пароля. Пример:

var user = await UserManager.FindByIdAsync(id);

var token = await UserManager.GeneratePasswordResetTokenAsync(user);

var result = await UserManager.ResetPasswordAsync(user, token, "MyN3wP@ssw0rd");
1
задан Iga 16 January 2019 в 09:57
поделиться

3 ответа

В зависимости от размера вашего проекта, существует множество пакетов, которые легко справляются с отправкой формы, например: formik, redux-form, react-final-form, если не считать нескольких. Но большинство из них используют ту же технику. Например, formik правильно делает это, а также обрабатывает некоторые крайние случаи для вас, чтобы вам не пришлось беспокоиться.

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

0
ответ дан tbuglc 16 January 2019 в 09:57
поделиться

Здесь вы можете сделать то же самое, что и ваш старый подход, но проблема в том, что вы откладываете отправку формы, так как коллекции HTML занимают больше времени, чем просмотр и управление состояниями. Посмотрите на пример:

import React from 'react';

class Login extends React.Component {
  login(event) {
    event.preventDefault();

    const data = {};
    const inputs = event.getElementsByTagName('input');

    for (let input of inputs) data[input.id] = input.value;

    // send `data` to server to test for login

    console.log(data);
  }

  render() {
    return (
      <form onSubmit={this.login}>
        <input id="email" type="email" />
        <input id="password" type="password" />
        <button type="submit">Login</button>
      </form>
    );
  }
}

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

0
ответ дан Danyal Imran 16 January 2019 в 09:57
поделиться

Они являются множественным способом создания формы в реакции, и многие не включают state.

Многие люди используют redux для хранения своих состояний приложений.

Конечно, вы можете использовать свой компонент state, но вы также можете использовать redux-form (популярный) или formik (легкий).

Сохранение в state так же просто, как сохранение в object, но тогда может быть сложно хранить все в одном месте в вашем React DOM.

Вот почему Избыток существует, и почему вы должны прочитать, что это такое, это поможет вам получить ответ.

0
ответ дан Dimitri Kopriwa 16 January 2019 в 09:57
поделиться
Другие вопросы по тегам:

Похожие вопросы: