标签: redux-form
如何使用redux-forms v6在同一页面上创建多个表单？
我有一个简单的待办事项应用程序,其中我的redux商店包含一系列'todos'.我的'Todo'组件映射到商店中的每个'todo',并呈现使用redux-forms v6的'TodoForm'组件.
就像现在一样,每个'todo'都共享相同的表单名称/密钥,所以每次我在'title'字段中输入内容时,它都会改变每个待办事项的'标题'.我通过使用唯一的字段名称找到了一个解决方法,但我担心随着应用程序的增长,它会使事情变得复杂,并且更愿意使用唯一的表单名称,因此每个字段都可以具有相同的名称而不会干扰其他表单
(TodoForm1,TodoForm2,TodoForm3都可以有一个独特的'标题'字段,而不是包含'title1','title2','title3'字段的TodoForm.
我尝试访问TodoForm的道具,所以我可以将每个表单的键设置为组件的唯一ID,但似乎组件不会早期接收道具.
我也尝试制作一个立即调用的函数,它会吐出一个随机数,并使用该数字作为表单的名称,但这也无效.
如何通过我的所有待办事项映射并使用唯一的表单键呈现v6 redux-form？
这是app,console和redux devtools的图片.有3个'todos',但是只有一个表单连接它们todo-926,即使每个表单键应该是在一个立即调用的函数中随机生成的:
HomePageMainSection.index.js
renderTodos(todo) {
if (!todo) {
return <div>No Todos</div>;
}
return (
<div key={todo.get('id')}>
<Todo
todo={todo}
updateTodo={this.props.updateTodo}
deleteTodo={this.props.deleteTodo}
/>
</div>
);
}
render() {
if (!this.props.todos) {
return <div>No Todos</div>;
}
return (
<div className={styles.homePageMainSection}>
<h1>Hey I'm the Main Section</h1>
<div>
{this.props.todos.get('todos').map(this.renderTodos)}
</div>
</div>
);
}
Todo.index.js:
renderTodo() {
if (this.state.editMode) {
return (
<TodoForm
todo={this.props.todo} changeTodoEditMode={this.changeTodoEditMode}
updateTodo={this.props.updateTodo}
/>
);
}
return (
<div className={styles.Todo} onClick={this.changeTodoEditMode}>
<div className="card card-block">
<h4 …推荐指数
解决办法
查看次数
redux-form v6显示选择字段的验证错误
在redux-form的v6中,我们可以显示正常输入字段的错误,如下所示
我们可以像这样创建自定义renderField
const renderField = ({ input, label, type, meta: { touched, error } }) => (
<div>
<label>{label}</label>
<div>
<input {...input} placeholder={label} type={type}/>
{touched && error && <span>{error}</span>}
</div>
</div>
)
在表单中,我们可以使用该自定义renderField
<Field name="username" type="text" component={renderField} label="Username"/>
现在我需要知道,我们如何为select字段做同样的事情,我们应该如何将dropdown选项传递给这个自定义renderFields,是否有想法为select创建自定义renderField？
推荐指数
解决办法
查看次数
Redux-Form来自外部交互的更新字段值
我有一个redux-form连接到我的应用程序状态,一切似乎都很好.我可以获取数据并将其加载到我的表单中,然后提交数据并获取我想要的元数据...
但是,我有一个自定义交互(颜色选择器),需要动态更改托管字段的值.我尝试的所有内容都会改变屏幕,但不会改变redux格式状态,即当我提交表单时,我只获取原始字段数据而不是表单中显示的新数据.
下面的版本是将字段props传递给组件并尝试使用ColorSelect组件状态作为字段值.我也试过创建一个动作创建者,但是同样的结果和更多的代码,这个例子......
注:react@^15.4.2,react-redux @^5.0.2,redux-form @^6.4.3
ES6:CollectionForm.js
...
import ColorSelect from './ColorSelect';
class CollectionForm extends Component {
/**
* On form submit accepted
* @param values
*/
onSubmit(values){
//See screenshot for evidence
log('Updating collection:', 'warn', values);
//values.color is grey and not yellow!
this.props.dispatch(updateCollection(values));
return;
}
/**
* Form render
* @return {JSX}
*/
render()
{
const { handleSubmit, submitting } = this.props;
return (
<form onSubmit={handleSubmit(this.onSubmit.bind(this))}>
<Field component={renderTextInput} name="name" type="text" label="Name"/>
<Field component={ColorSelect} name="color" />
<div class="field-buttons right-align group">
<Button …推荐指数
解决办法
查看次数
Redux Forms有时会以注册/取消注册无限循环结束
我在驯服Redux Forms时遇到了麻烦.
我有以下表格和字段.如果我只是添加正确的数据并提交,这似乎有效,但如果我尝试导致验证错误并重新输入数据几次,它有时会以无限循环结束.
无限循环是重复调用action @@redux-form/REGISTER_FIELD并action @@redux-form/UNREGISTER_FIELD最终导致以下错误.
未捕获错误:超出最大更新深度.当组件在componentWillUpdate或componentDidUpdate中重复调用setState时,可能会发生这种情况.React限制嵌套更新的数量以防止无限循环.
任何人都可以帮助我理解可能导致这种情况的原因以及我可以采取哪些步骤来使其正常工作？
ContactPage.js
import React, {Component} from 'react';
import ContactForm from './contact-form';
class ContactPage extends Component {
submit = values => {
console.log(values);
};
render() {
return (
<div>
<ContactForm onSubmit={this.submit}/>
</div>
);
}
}
export default ContactPage;
ContactForm.js
import React from 'react';
import {Field, reduxForm} from 'redux-form';
import {isEmail, isRequired, maxLength} from '../validation';
import {Input, Select, TextArea} from './form-elements';
let ContactForm = ({handleSubmit}) =>
<form onSubmit={handleSubmit}>
<div>
<Field name="fullname" …推荐指数
解决办法
查看次数
redux-form字段在表单加载后不重新渲染/更新
我在登录表单字段验证中使用redux-form时遇到问题.目前,我只是想让同步验证工作,所以我可以检查基本错误.问题是表单似乎只在组件安装时检查验证,然后在该点之后不再检查.这是我的代码:
import React from 'react';
import { Field, reduxForm } from 'redux-form';
import * as Redux from 'react-redux';
import Input from './../../helpers/Input';
import Button from './../../helpers/Button';
export const Signup = React.createClass({
renderInput({ label, type, input: { value }, meta: { touched, error }}){
return (
<Input label={ label }
type={ type }
filled={ value ? true : false }
touched={ touched }
error={ error } />
);
},
render(){
const { handleSubmit } = this.props;
return(
<div>
<form onSubmit={ handleSubmit …推荐指数
解决办法
查看次数
Redux Forms提交验证不会设置错误消息
我正在尝试使用提交验证进行表单.当我提交表格时,我handleSubmit被解雇并抛出SubmissionError,但没有任何事情发生.
提交(每次只抛出错误):
function submit(values)
{
console.log(values);
throw new SubmissionError({ password: 'Wrong password', _error: 'Login failed!' });
}
从示例中渲染字段:
const renderField = ({ input, label, type, meta: { touched, error } }) => (
<div>
<label>{label}</label>
<div>
<input {...input} placeholder={label} type={type}/>
{touched && error && <span>{error}</span>}
</div>
</div>
)
我的表格:
class LoginForm extends Component {
render()
{
const { error, handleSubmit, pristine, reset, submitting } = this.props
console.log(error);
return (
<div>
<form onSubmit={handleSubmit}>
<h1>Login</h1>
<Field name="email" type="text" …推荐指数
解决办法
查看次数
如何使用Redux-Form V6创建自定义下拉字段组件？
我有一个形式繁重的应用程序,我希望尽可能多地控制,同时使用尽可能少的依赖项.为此,我想利用redux-form v6的自定义Field组件API,并制作一堆我可以随意放入的自定义组件.其中一个组件是下拉选择.
问题是自定义下拉组件未连接到状态,即使它呈现正常.
在文档中,示例完成此操作:
<Field name="favoriteColor" component="select">
<option></option>
<option value="#ff0000">Red</option>
<option value="#00ff00">Green</option>
<option value="#0000ff">Blue</option>
</Field>
我正在寻找一种即插即用的方法,我可以放入一个组件,并在道具中输入一组数据:
Form.js:
<div className="form-group">
<label htmlFor="dropDownSelect">Select an Option</label>
<Field
name="dropDownSelect"
component={DropDownSelect}
people={people}
className="form-control"
>
</Field>
</div>
DropDownSelect.js:
import React from 'react';
import styles from './styles.css';
class DropDownSelect extends React.Component { // eslint-disable-line react/prefer-stateless-function
renderSelectOptions = (person) => {
return (
<option key={person} value={person}>{person}</option>
);
}
render() {
return (
<select>
{this.props.people.map(this.renderSelectOptions)}
</select>
);
}
}
export default DropDownSelect;
当我检查Redux DevTools时,字段的值在与下拉列表交互时永远不会填充:
我为两个字段选择了一个值,但只有'effDate'填充了一个值,而'dropDownSelect'仍然是一个没有值的注册字段.
编辑:
根据这个例子,我想这样做的方法就像:
function …推荐指数
解决办法
查看次数
Redux-表格:无法在提交时发送行动
我在我的React/Redux应用程序中使用了redux-form,我正在试图弄清楚如何在提交时发送一个动作.
我已经能够触发handleSubmit函数,并且我传递给它的submit函数被执行,但是没有调用'submitFormValues'动作.
我尝试过使用mapDispatchToProps和connect(),但这也不起作用.
Redux-Form操作执行(START_SUBMIT,STOP_SUBMIT,SET_SUBMIT_SUCCEEDED),但我自己的动作创建者永远不会执行.
这是表格:
import React from "react";
import { Field, reduxForm } from "redux-form";
import {submitFormValues} from "../../../actions/BasicFormActions";
function submit(values) {
//Can log the values to the console, but submitFormValues actionCreator does not appear to be dispatched.
return new Promise(function(resolve) { resolve(submitFormValues(values))} )
}
const renderField = ({ input, label, type, meta: {touched, error} }) => (
<div>
<label>{label}</label>
<div>
<input {...input} placeholder={label} type={type}/>
{touched && error && <span>{error}</span>}
</div>
</div>
)
const BasicForm = (props) => { …推荐指数
解决办法
查看次数
如何在react-datepicker中实现验证/限制
我试图在react-datepicker组件中实现限制或验证.我使用redux-form进行验证和规范化(实现限制)
https://redux-form.com/6.0.0-rc.1/examples/normalizing/
问题:我观察到当我们尝试在字段中输入内容时,不会调用redux-form的规范化函数和验证函数
虽然我们提交表单时未提交此值,但我需要显示一些验证错误或限制用户输入无效字符.
我为日期选择器组件创建了一个包装器,并通过redux字段在我的表单中使用它
我的日期选择器组件: -
return (
<div className={"render-date-picker "}>
<div className="input-error-wrapper">
{(input.value) ? <label> {placeholder} </label> : ''}
<DatePicker className="input form-flow" {...input}
placeholderText={placeholder}
selected={input.value ? moment(input.value) : null}
maxDate={maxDate || null}
minDate={minDate || null}
dateFormat={isTimePicker ? "LLL" : "DD/MM/YYYY"}
showYearDropdown
showMonthDropdown
disabledKeyboardNavigation
/>
{touched && error && <span className="error-msg">{t(error)}</span>}
<span className="bar" style={{ 'display': this.state.is_focus ? 'block' : 'none' }} ></span>
</div>
</div>
);
redux表格字段: -
<Field
name="date_of_birth"
type="text"
className="input form-flow extra-padding-datepicker"
component={RenderDatePicker}
maxDate={moment().subtract(18, "years")}
validate={[required, …推荐指数
解决办法
查看次数
如何将值从on组件传递到Redux表单
我在React.js中使用Redux表单和我的表单,我有一个自定义谷歌地图组件我想绑定lat和long到我的表单
形成
import React from 'react';
import { Field, reduxForm } from 'redux-form';
const SimpleForm = props => {
const { handleSubmit, pristine, reset, submitting } = props;
return (
<form onSubmit={handleSubmit}>
<div className="position-relative form-group">
<label>First Name</label>
<div>
<Field
name="firstName"
component="input"
type="text"
placeholder="First Name"
className="form-control"
/>
</div>
</div>
<Field name = 'eventLocation'
component = {MyParentComponentWrapper} />
</form>
);
};
export default reduxForm({
form: 'simple', // a unique identifier for this form
})(SimpleForm);
我的MyParentComponentWrapper代码是
import React from 'react';
import { compose, …推荐指数
解决办法
查看次数