当 TextInput 获得焦点时，键盘会隐藏提交按钮。如何自动滑动TextInput下方的组件
我有一个由几个经典字段和两个 FieldArray 组成的表单。这些 FieldArray 位于不同的部分，但相互关联。当我向 FieldArray A 添加一个项目（一行不同类型的字段）时，应该为 FieldArray B 构建另一行。FieldArray A 和 B 的不同之处在于它们表示不同的字段集合和结构，但是，当将一行添加到 A 中时，也必须将一行添加到 B 中。
为了向 FieldArray A 添加一行，我遵循记录的方法，在 FieldArray A 的包装组件内使用Push方法进入 prop 字段。但是，我无法访问 FieldArray B 的 prop 字段。该 prop 只是可从 FieldArray B 内的包装组件内访问。
是否有其他方式或方法可以从外部访问 FieldArray B 的 prop 字段？formValues() 或 formValuesSelector() 没有用。
我正在尝试测试当用户将文本输入到 a 时input， a会从button变为。它显然可以在浏览器中运行，但我无法通过测试。我正在使用和。但是，如果我使用本机而不是s ，测试就会通过。disabledenabledredux-formreact-testing-libraryinputredux-formField
我用最少的代码创建了一个存储库来复制问题。
我从redux表单官方页面开始关注本教程，网址为 http://redux-form.com/5.3.1/#/getting-started?_k=8q7qyo
我面临着两个问题
1：如何在handleSubmit函数或任何其他函数中获取表单数据。这样我就可以根据需要处理表格数据。
2：每次我提交表单时，页面都会刷新。我不想刷新我的页面
import React, {Component} from 'react';
import {reduxForm} from 'redux-form';
class ContactForm extends Component {
render() {
const {fields: {firstName, lastName, email}, handleSubmit} = this.props;
return (
<form onSubmit={handleSubmit}>
<div>
<label>First Name</label>
<input type="text" placeholder="First Name" {...firstName}/>
</div>
<div>
<label>Last Name</label>
<input type="text" placeholder="Last Name" {...lastName}/>
</div>
<div>
<label>Email</label>
<input type="email" placeholder="Email" {...email}/>
</div>
<button type="submit">Submit</button>
</form>
);
}
}
ContactForm = reduxForm({ // <----- THIS IS THE IMPORTANT PART!
form: 'contact', // a …我正在尝试使用容器中的getFormValues将表单值添加到道具中.但是,当我在派生组件中查找values属性时,我得到一个未定义的.我错过了什么？
容器代码:
import {reduxForm, getFormValues} from 'redux-form';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import * as actions from '../actions/propertiesActions';
import Properties from '../components/common/Properties';
const mapStateToProps = (state, ownProps) => {
return {
form: ownProps.id,
values: getFormValues(ownProps.id)(state)
};
};
const mapDispatchToProps = (dispatch) => {
return {
actions: bindActionCreators(actions, dispatch)
};
}
export default connect(mapStateToProps, mapDispatchToProps)(reduxForm()(Properties));
在Properties组件中,调用this.props.values将返回undefined.
可能是什么问题？谢谢,
我有一个Redux表单，它可以正常工作，除了一件事：我需要创建一个复选框数组，以便用户可以在多个选项之间进行选择。
在HTML / PHP中，可以这样写：
<form>
…
<input type="checkbox" name="item[]" value="120" />
<input type="checkbox" name="item[]" value="231" />
…
</form>
因此，在服务器端，将收到一个这样的数组（假设选中了每个复选框）：，其中数组$item = [120, 231]中的每个项目都对应于复选框的值。
用redux形式做同样的事情：
let items = [{name:…, value:…}, …];
<form>
{items.map(item => {
<Field component="input"
type="checkbox"
name={item.name + '[]'}
value={item.value}
})}
</form>
结果是输入：<input type="checkbox" name="item[]" value="true" />，这不是我期望的。另外，选中复选框，检查每个阵列。
所以我将的名称属性更改<Field />为
name={`item[${item.value}]`}
是什么使复选框能够按预期工作，但又导致提交时产生该数据：
{
//index: 0, 1, ,…, 120, 121, … ,231, …
item: [undefinded,undefined,…,true,undefined,…,true,undefined,…]
}
所以我的问题是：创建复选框（特别是其名称）是否错了，还是必须在初始化时一次提交一次数据时转换数据？
如果我必须转换数据，那最好的地方在哪里？
我正在使用Redux Form版本6.4.3并且我正在尝试验证两个日期字段,以使'to'日期必须始终在'from'日期之前.
其他例子说我应该能够引用fields数组,props但是没有这样的数组.该form state有称为数组registeredFields但是但那些刚刚似乎是形式{name: 'dob', type: 'Field'}
这是我的表单代码
import React from 'react'
import DatePicker from 'react-bootstrap-date-picker'
import moment from 'moment'
import {Field, reduxForm} from 'redux-form'
import {Form, Row, Col, Button, FormGroup, ControlLabel, FormControl, HelpBlock} from 'react-bootstrap'
// validations
const required = value => !value ? 'This field is required' : undefined
const maxDate = max => value =>
value && moment(value).isAfter(max) ? `Must be before ${max}` : undefined
const …下面是我的RequestAnInviteredux-form ...问题是当我提交表单时,submitting从未更改为true..你可以看到我有一个下面的日志,它总是输出false.
当我提交表单时,我做错了什么,以及使提交从未设置为真的还原形式？谢谢
class RequestAnInvite extends React.Component {
componentDidMount() {
this.props.dispatch(loadTitles());
}
handleSubmit(data) {
console.log(data);this.props.dispatch(requestInvitationsActions.createInvitationRequest(data));
}
render() {
const { handleSubmit, submitting } = this.props;
console.log('submitting: ' + submitting);
return (
<div className="container-fluid h-100">
<form onSubmit={handleSubmit(this.handleSubmit.bind(this))}>
<Field
name="email"
type="text"
component={renderField}
label="Email"
placeholder="xxx@acme.com"
/>
<p>submitting: {submitting}</p>
<div className="form-group form-group-actions">
<button type="submit" className="btn btn-primary" disabled={submitting}>
{submitting ? 'Requesting...' : 'Request an Invite'}
</button>
</div>
</form>
</div>
);
}
}
RequestAnInvite = reduxForm({
form: 'RequestAnInvite', …我有一个场景,其中有一个项目列表,每个项目都有名称和值选择器(所以两个输入).用户选择名称(其单选按钮),然后选择该值.我正在使用redux-form,到目前为止我所取得的成就:
<Field name='item1' component={DropDownPicker} />
<Field name='item2' component={DropDownPicker} />
提交给出的价值为 {item1: 1, item2: 2}
现在有很多不同类别项的值,它将是一个大的杂乱对象,所有类别数据都在一个地方,我想避免这种情况.
如何将这一项数据作为{first: {item1: 1, item2: 2}}集合或集合来获取[{item1: 1, item2: 2}]
我有一个很大的表格，其中的字段是基于模式动态绘制的。（我正在遍历JSON模式以写入我的字段）。
我的某些字段是嵌套的，因此命名约定遵循点符号。
ParentField.ChildField.Name
这将自动嵌套数据作为输入。
ParentField {
ChildField {
Name: "Value of field"
}
}
redux-form提供了一个FieldArray，允许您push()按需字段，但这改变了数据格式以包括信息数组- 不是我想要的！
因此，我需要能够按需注册和注销字段（例如，单击按钮）
这些文档指向actionCreators，但我不知道如何实现它们。