React + Redux -在表单组件中处理CRUD的最佳方式是什么？
我有一个用来创建、读取、更新和删除的表单。我创建了3个具有相同表单的组件，但我向它们传递了不同的属性。我有CreateForm.js，ViewForm.js (只读，带删除按钮)和UpdateForm.js。
我曾经使用过PHP，所以我总是以一种形式完成这些工作。
我使用React和Redux来管理商店。
当我在CreateForm组件中时，我将这个props createForm={true}传递给我的子组件，使其不用值填充输入，也不禁用它们。在我的ViewForm组件中，我传递了这个属性readonly="readonly"。
我还遇到了另一个问题，一个文本区域填充了一个值，并且是不可更新的。React textarea with value is readonly but need to be updated
如果只有一个组件来处理表单的这些不同状态，最好的结构是什么？
你有什么建议，教程，视频，演示可以分享吗？
回答 3
Stack Overflow用户
发布于 2015-10-28 22:15:43
我找到了Redux Form包。它真的做得很好！
因此，您可以在React-Redux中使用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);并在组合减速器中添加redux形式的减速器：
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']));
}填充表单的另一种方法是设置initialValues。
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);如果您有任何其他方法来处理这个问题，请留言！谢谢。
Stack Overflow用户
发布于 2016-06-02 19:06:51
更新:现在是2018年，我只会使用Formik (或者类似Formik的库)
还有react-redux-form (step-by-step)，它似乎用redux-form的javascript (& boilerplate)交换了一些标记声明，看起来不错，但我还没用过。
自述文件中的剪切和粘贴：
import React from 'react';
import { createStore, combineReducers } from 'redux';
import { Provider } from 'react-redux';
import { modelReducer, formReducer } from 'react-redux-form';
import MyForm from './components/my-form-component';
const store = createStore(combineReducers({
user: modelReducer('user', { name: '' }),
userForm: formReducer('user')
}));
class App extends React.Component {
render() {
return (
<Provider store={ store }>
<MyForm />
</Provider>
);
}
}./components/my-form-component.js
import React from 'react';
import { connect } from 'react-redux';
import { Field, Form } from 'react-redux-form';
class MyForm extends React.Component {
handleSubmit(val) {
// Do anything you want with the form value
console.log(val);
}
render() {
let { user } = this.props;
return (
<Form model="user" onSubmit={(val) => this.handleSubmit(val)}>
<h1>Hello, { user.name }!</h1>
<Field model="user.name">
<input type="text" />
</Field>
<button>Submit!</button>
</Form>
);
}
}
export default connect(state => ({ user: state.user }))(MyForm);编辑:比较
react-redux-form文档提供了与redux-form的比较：
https://davidkpiano.github.io/react-redux-form/docs/guides/compare-redux-form.html
Stack Overflow用户
发布于 2016-06-07 17:14:48
对于那些不关心处理表单相关问题的巨大库的人，我推荐redux-form-utils。
它可以生成表单控件的值和更改处理程序，生成表单的缩减程序，方便的操作创建器来清除某些(或所有)字段，等等。
您所需要做的就是将它们组装到您的代码中。
通过使用redux-form-utils，您可以完成如下形式的操作：
import { createForm } from 'redux-form-utils';
@createForm({
form: 'my-form',
fields: ['name', 'address', 'gender']
})
class Form extends React.Component {
render() {
const { name, address, gender } = this.props.fields;
return (
<form className="form">
<input name="name" {...name} />
<input name="address" {...address} />
<select {...gender}>
<option value="male" />
<option value="female" />
</select>
</form>
);
}
}然而，这个库只解决了C和U的问题，对于R和D，也许一个更集成的Table组件是相反的。
https://stackoverflow.com/questions/33237818
复制相似问题