javascript - React + Redux - 在表单组件中处理 CRUD 的最佳方式是什么？

Question

我有一个用于创建、读取、更新和删除的表单。我创建了 3 个具有相同形式的组件，但我向它们传递了不同的 Prop 。我得到了 CreateForm.js、ViewForm.js(带有删除按钮的只读)和 UpdateForm.js。

我以前使用 PHP，所以我总是以一种形式完成这些工作。

我使用 React 和 Redux 来管理商店。

当我在 CreateForm 组件中时，我将此 Prop createForm={true} 传递给我的子组件，以不使用值填充输入并且不禁用它们。在我的 ViewForm 组件中，我传递了这个 Prop readonly="readonly"。

我遇到了另一个问题，文本区域填充了一个值并且不可更新。 React textarea with value is readonly but need to be updated

只有一个组件来处理表单的这些不同状态的最佳结构是什么？

您有任何建议、教程、视频、演示要分享吗？

Answer 1

我找到了 Redux Form包裹。它做得非常好!

因此，您可以使用 Redux与 React-Redux .

首先你必须创建一个表单组件(显然):

import React from 'react';
import { reduxForm } from 'redux-form';
import validateContact from '../utils/validateContact';

class ContactForm extends React.Component {
  render() {
    const { fields: {name, address, phone}, handleSubmit } = this.props;
    return (
      <form onSubmit={handleSubmit}>
        <label>Name</label>
        <input type="text" {...name}/>
        {name.error && name.touched && <div>{name.error}</div>}

        <label>Address</label>
        <input type="text" {...address} />
        {address.error && address.touched && <div>{address.error}</div>}

        <label>Phone</label>
        <input type="text" {...phone}/>
        {phone.error && phone.touched && <div>{phone.error}</div>}

        <button onClick={handleSubmit}>Submit</button>
      </form>
    );
  }
}

ContactForm = reduxForm({
  form: 'contact',                      // the name of your form and the key to
                                        // where your form's state will be mounted
  fields: ['name', 'address', 'phone'], // a list of all your fields in your form
  validate: validateContact             // a synchronous validation function
})(ContactForm);

export default ContactForm;

在此之后，连接处理表单的组件:

import React from 'react';
import { connect } from 'react-redux';
import { initialize } from 'redux-form';
import ContactForm from './ContactForm.react';

class App extends React.Component {

  handleSubmit(data) {
    console.log('Submission received!', data);
    this.props.dispatch(initialize('contact', {})); // clear form
  }

  render() {
    return (
      <div id="app">
        <h1>App</h1>
        <ContactForm onSubmit={this.handleSubmit.bind(this)}/>
      </div>
    );
  }

}

export default connect()(App);

并在您的组合 reducer 中添加 redux 形式的 reducer :

import { combineReducers } from 'redux';
import { appReducer } from './app-reducers';
import { reducer as formReducer } from 'redux-form';

let reducers = combineReducers({
  appReducer, form: formReducer // this is the form reducer
});

export default reducers;

验证器模块看起来像这样:

export default function validateContact(data, props) {
  const errors = {};
  if(!data.name) {
    errors.name = 'Required';
  }
  if(data.address && data.address.length > 50) {
    errors.address = 'Must be fewer than 50 characters';
  }
  if(!data.phone) {
    errors.phone = 'Required';
  } else if(!/\d{3}-\d{3}-\d{4}/.test(data.phone)) {
    errors.phone = 'Phone must match the form "999-999-9999"'
  }
  return errors;
}

表单完成后，当你想用一些值填充所有字段时，你可以使用initialize函数:

componentWillMount() {
  this.props.dispatch(initialize('contact', {
    name: 'test'
  }, ['name', 'address', 'phone']));
}

填充表单的另一种方法是设置初始值。

ContactForm = reduxForm({
  form: 'contact',                      // the name of your form and the key to
  fields: ['name', 'address', 'phone'], // a list of all your fields in your form
  validate: validateContact             // a synchronous validation function
}, state => ({
  initialValues: {
    name: state.user.name,
    address: state.user.address,
    phone: state.user.phone,
  },
}))(ContactForm);

如果您还有其他处理方法，请留言!谢谢。