我使用redux表单收到错误.它说我的文件名"搜索只是可读的".这是一个还原形式问题还是其他一些问题？它与连接有关吗？现在我只能使用旧版的表格
import React from 'react';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
var Select = require('react-select');
import {fetchAllEmails, searchUsers} from '../actions/searchAction';
import {getDashBoardDataFromEmail, clearUserState} from '../actions/dashboardAction';
var LocalToken = localStorage.getItem('token');
import _ from 'lodash';
import {reduxForm} from 'redux-form';
const Search = React.createClass({
contextTypes:{
router: React.PropTypes.object.isRequired
},
getInitialState: function(){
return {
value:'xyz'
}
},
componentWillMount: function(){
this.props.fetchAllEmails(LocalToken);
},
handleChange: function(e){
this.props.getDashBoardDataFromEmail(LocalToken,e)
this.context.router.push('/dashboard')
},
handleSearchChange(e) {
this.setState({ value: e.target.value });
},
handleInputSubmit(){
console.log('hello')
},
render(){
const {fields: {someFormField, handleInputSubmit} }= this.props; …我可以配置还原形式的mapStateToProps其他react-redux参数.v6
就像在redux-form中一样v5〜> http://i.stack.imgur.com/nSZKM.jpg
Run Code Online (Sandbox Code Playgroud)reduxForm(config:Object, mapStateToProps?, mapDispatchToProps?, mergeProps?, options?)创建一个装饰器,使用redux-form将表单组件连接到Redux.它需要一个config参数,然后选择mapStateToProps,mapDispatchToProps,mergeProps和options参数,它们与react-redux的connect()函数所采用的参数完全对应,允许您将表单组件连接到Redux中的其他状态.
.
例如:
import { reduxForm } from 'redux-form/immutable';
...
export default reduxForm({
form: 'signUp'
}, state => ({
lists: state.get('list').toJS()
}));
我希望用户能够输入最多2000的数字,超过2000的任何内容都可以简单地反馈到输入中作为'2000'.
<input type="number" className="no-spin"
min="0" max="2000"
value={???}
{...eval(`${meal}_salt_amt_1`)} />
顺便说一下,'max'属性只能阻止用户使用向上箭头增加到2000以上.
而redux-form的"验证"功能并不限制可输入的内容.
以下是我将值(状态)限制为2000的方法......
export function updateStats(values) {
for (var value in values){
if (value.search('salt_amt') >= 0) {
if ( values[value] > 2000) values[value] = 2000;
}
}
return {
type: UPDATE_STATS,
stats: JSON.parse(JSON.stringify(values))
};
}
...到目前为止一切都那么好,因为在我的DevTools redux插件中,我可以看到这些值的状态在2000年达到顶峰.
但是如何强制该状态回到我的redux-form输入字段？
将状态映射到道具并使用道具不起作用.这样做让我输入超过2000的任何数字......
function mapStateToProps(state) {
return {
...
breakfast_salt_amt_1: state.stats.breakfast_salt_amt_1,
...
}
}
<input type="number" className="no-spin"
min="0" max="2000"
value={breakfast_salt_amt_1}
{...breakfast_salt_amt_1} />
只是使用国家也不起作用......
<input type="number" className="no-spin"
min="0" max="2000"
value={state.stats.breakfast_salt_amt_1}
{...breakfast_salt_amt_1} />
// => Uncaught TypeError: …下面是redux-form的代码.一切都与redux商店完美配合,但我无法在span元素中显示错误消息.
import React from 'react'
import { Button } from 'react-bootstrap'
import { Field, reduxForm } from 'redux-form'
const validate = (values) => {
const errors = {}
if (!values.firstname) {
errors.firstname = 'Required'
}
return errors
}
const renderInput = (field) => (
<div>
<label>{field.placeholder}</label>
<div>
<input {...field.input}/>
{field.error && <span>{field.error}</span>}
</div>
</div>
)
@reduxForm({
form: 'addUserForm',
validate
})
export default class CreateUserForm extends React.Component {
render() {
const {addUser, handleSubmit} = this.props
return (
<form onSubmit={handleSubmit(addUser)}>
<Field type="text" …我有以下CustomInput组件:
import React from 'react';
const CustomInput = props => (
<div className="form-group">
<label className="form-label">{props.title}</label>
<input
className="form-input"
name={props.name}
type={props.inputType}
value={props.content}
onChange={props.controlFunc}
placeholder={props.placeholder}
/>
</div>
);
CustomInput.propTypes = {
inputType: React.PropTypes.oneOf(['text', 'number']).isRequired,
title: React.PropTypes.string.isRequired,
name: React.PropTypes.string.isRequired,
controlFunc: React.PropTypes.func.isRequired,
content: React.PropTypes.oneOfType([
React.PropTypes.string,
React.PropTypes.number,
]).isRequired,
placeholder: React.PropTypes.string,
};
export default CustomInput;
这是我的形式:
import React, { PropTypes } from 'react';
import { Field, reduxForm } from 'redux-form';
import CustomInput from '../components/CustomInput';
const renderMyStrangeInput = field => (
<CustomInput
inputType={'number'}
title={'How many items do you …我需要在rest Edit上以admin身份访问当前记录。我有一个实体，需要它的属性之一来执行条件任务。我在整个互联网上搜索，却一无所获。
export const UserEdit = (props) => (
<Edit {...props}>
<SimpleForm>
<TextField source="Username" label="Username" />
</SimpleForm>
</Edit>
); 我对 React 和 Redux-Form 还很陌生，目前我需要一些帮助。
基本上我有列表页面和他们的编辑按钮。单击编辑时，我会显示一个带有字段的模式弹出窗口，并执行 API 调用以获取相应的列表数据。
您能否让我知道如何使用从 API 调用接收到的数据预先填充模态弹出窗口中的字段？
非常感谢带有代码示例的演示（就像我说我对 React & Redux & Redux-form 很陌生）。:(
提前致谢！
我有一个无状态的 React 函数来将反应选择 Select 渲染到表单中。除了 redux-form 被重置之外，其他一切都可以很好地与 redux-form 配合使用。成功发布后我需要手动重置表单。
当 Select 值发生变化时，onChange 和 onBlur 会正确更改 redux-form 值。当我重置 redux-form 时，redux-form 值被清除，但 Select 将具有旧值。
function SelectInput(props) {
const { input, options, label } = props;
const { onChange, onBlur } = input;
const handleChange = ({ value }) => {
onChange(value);
};
const handleBlur = ({ value }) => {
onBlur(value);
};
return (
<FormField {...props}>
<Select placeholder={label} options={options} onChange={handleChange} onBlur={handleBlur} />
</FormField>
);
}
我将 SelectInput 转换为 React.PureComponent，并将该值添加为组件内的状态，并查找组件何时收到新的 props：
constructor(props) { …我正在使用redux向导表单进行编辑,其中我在向导中的每个页面的componentDidMount中加载数据.但是,当我更新值并转到下一页时,更新的值不会在第二种形式中重新连接,而如果我来到上一页,它会加载初始值而不是更新的值.任何人都可以告诉我我的代码有什么问题:
第一表格:
componentDidMount() {
const users = this.props.users;
let user = {};
user = users[this.props.userID];
this.setState({file: user.profilePicture});
this.props.initialize(user);
console.log('user is', user);
}
render() {
const { handleSubmit } = this.props;
const age = (value) => (value == null ? '' : this.state.age);
return (
<form onSubmit={handleSubmit}>
<Col sm="12">
<Card className="card-border">
<CardBody>
<FormGroup row>
<Col xs="12" lg="2">
<img
src={this.state.file}
style={{width: 125, height: 125}}
className="img-avatar"
/>
</Col>
<Col xs="12" lg="10">
<Field
type="file"
id="file-input"
name="image"
accept="image/*"
component={ImageUpload}
label="Upload User Image *"
validation="fieldRequired"
className="fileLoader" …刚刚学习 redux-form 并从我的组件中尝试通过代码更改字段名称：
Import React from 'react'
import { connect, dispatch } from 'react-redux'
import { Field, reduxForm, formValueSelector } from 'redux-form'
let SelectingFormValuesForm = props => {
const changeStuff = (props) => {
dispatch(change('selectingFormValues', 'firstName', 'Bertje'))
}
const {
favoriteColorValue,
fullName,
handleSubmit,
hasEmailValue,
pristine,
reset,
submitting,
change
} = props
return (
<form onSubmit={handleSubmit}>
<div>
<label>First Name</label>
<div>
<Field
name="firstName"
component="input"
type="text"
placeholder="First Name"
/>
</div>
</div>
<div>
<label>Last Name</label>
<div>
<Field
name="lastName"
component="input"
type="text"
placeholder="Last Name"
/>
</div> …在我的反应组件中，我试图设置一个名为“total”的字段。我已将更改操作作为道具导入到我的组件中：
import React, { Component, Fragment } from 'react'
import { Field, FieldArray, reduxForm, getFormValues, change } from 'redux-form'
import { connect } from 'react-redux'
import { CalcTotal } from './calculationHelper';
const renderField = ({ input, label, type, meta: { touched, error } }) => (
<div>
<label>{label}</label>
<div>
<input {...input} type={type} placeholder={label} />
{touched && error && <span>{error}</span>}
</div>
</div>
)
const renderMods = ({ fields, meta: { error, submitFailed } }) => (
<Fragment>
<ul>
<li>
<button type="button" …我在用着react-select。当我从 select 中选择一个确定值时，我遇到了下一个问题
类型错误：无法读取未定义的属性“值”
另外，从减速器获取的值todoList没有显示，我看不到它们。
这是我的代码：
import Select from "react-select";
import "./styles.css";
import { searchTodos } from "../../actions/ServiceActions";
class SelectedTodo extends Component {
constructor(props) {
super(props);
this.state = {
selectedTodo: ""
};
this.handleChange = this.handleChange.bind(this);
}
bringTodos = () => {
//WHEN I'M EXECUTING THESE CODE LINES I CAN'T SEE TODOS VALUES
return this.props.todoList.map(todo => {
return (
<option key={todo._id} value={todo._id}>
{todo.name}
</option>
);
});
};
handleChange = e => {
this.setState({ selectedTodo: e.target.value });
}; …