使用 Context API 在 React 中处理表单答案

【问题标题】：Handling forms in React using Context API使用 Context API 在 React 中处理表单
【发布时间】：2019-07-02 11:14:05
【问题描述】：

在我的管理面板中的电子商务项目中，有一些表单用于编辑有关类别、产品、用户等的信息。我正在为我的全局状态使用 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>

给从数据库中获取的字段初始值。但是当我尝试使用 common 更改字段中的值时

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

显然，什么都没有发生，因为值没有从CategoryEdit 组件state 绑定。同样将setState() 放入componentDidMount() 也不起作用，因为Provider 中的数据是以异步方式获取的，所以起初value 是空的。我不想将此表单值更改绑定到全局状态，因为可以取消此更改，并且应该在提交表单后重新获取它们。所以我想要的是 - 最初使用来自Provider 的值填写表格， - 然后将它们传递给CategoryEdit 状态一次， - 然后处理组件状态的变化， - 使用 CategoryEdit 组件内的异步 fetch() 将数据提交到数据库 - 通过action 告诉Provider 它可以更新

这是做这些事情的正确模式，还是有更好的方法在 React 中使用 Context 处理表单。

【问题讨论】：

是的，这是正确的做法。确保使用上下文中的数据填充 CategoryEdit 的本地状态。然后使用本地状态 NOT 上下文填写表单中的输入字段。

标签： reactjs forms react-context

【解决方案1】：

好的，我解决了。我已经将组件从类组件更改为功能组件，并使用React Hooks 完成了整个工作。

如果有人感兴趣 - 发表评论，我会粘贴整个组件代码。

【讨论】：

当然，请这样做:)。