Обработка форм в React с использованием Context API - PullRequest
Новая
       12

Обработка форм в React с использованием Context API

0 голосов
/ 02 июля 2019

В моем проекте электронной коммерции в админ-панели есть формы, используемые для редактирования информации о категориях, товарах, пользователях и т. Д. Я использую Context API для моего глобального состояния. Так что в моем CategoryEdit компоненте я использую 

<Consumer>
  {value => {
    const { categories, dispatch } = value;
    if (categories === undefined || categories.length === 0) {
      return <Spinner />;
    } else {
      const category = categories.filter(category => {
        if (this.props.match.params.id !== undefined) {
          return category.id == this.props.match.params.id;
        } else {
          return category;
        }
      });
      return category.map(category => {
        return (
          <React.Fragment key={category.id}>
            <h1 className="title">Edit category</h1>
            <form className="form" onSubmit={this.saveChanges.bind(this, dispatch)}>
              <input type="hidden" value={category.id} name="cat_id" onChange={this.handleChange} />
              <label htmlFor="cat_name" className="form__label">
                Category name
              </label>
              <br />
              <input type="text" className="form__input-field" name="cat_name" value={category.name} onChange={this.handleChange} />
              <br />
              <label htmlFor="cat_title" className="form__label">
                Category title
              </label>
              <br />
              <input type="text" className="form__input-field" name="cat_title" value={category.title} onChange={this.handleChange} />
              <br />
              <label htmlFor="cat_description" className="form__label">
                Category discription
              </label>
              <br />
              <textarea className="form__input-field" name="cat_description" value={category.description} onChange={this.handleChange} />
              <br />
              <button type="submit" className="admin__button admin__button-success">
                Save
              </button>
              <button type="button" className="admin__button admin__button-secondary">
                Cancel
              </button>
            </form>
            {this.state.isSaved && <div>Changes saves</div>}
          </React.Fragment>
        );
      });
    }
  }}
</Consumer>

, чтобы дать полям начальные значения, выбранные из базы данных Но тогда, когда я пытаюсь изменить значения в поле, используя общий 

handleChange = e => {
  e.preventDefault();
  this.setState({
    [e.target.name]: e.target.value
  });
}

Очевидно, ничего не происходит, поскольку значения не связаны с CategoryEdit компонентом state. Также установка setState() в componentDidMount() не работает, потому что данные в Provider выбираются асинхронно, поэтому сначала value пуст. Я не хочу связывать эти изменения значений формы с глобальным состоянием, потому что эти изменения могут быть отменены, и они должны быть повторно получены после отправки формы. Так что я хочу это - изначально заполнить форму, используя значения от Provider, - затем передайте их в состояние CategoryEdit один раз, - затем обрабатывать изменения состояния компонента, - отправить данные в базу данных с помощью асинхронного fetch() внутри CategoryEdit компонента - скажите Provider через action, что он может обновить

Это правильный шаблон для таких вещей, или есть лучший способ обработки форм в React с использованием Context.

1 Ответ

0 голосов
/ 03 июля 2019

Хорошо, я понял это. Я изменил компонент с компонента класса на функциональный компонент и проработал все это, используя React Hooks.

Если кому интересно - оставьте комментарий, и я вставлю весь код компонента.

...