我创建了一个redux-form,我想在每个Field中添加className,用css自定义它们.每个字段的代码是:
<Form onSubmit={handleSubmit(requestAccountsFilter)}>
<FormGroup row>
<Field
id="symbol"
name="symbol"
type="text"
component={inputField}
placeholder="Enter Product Here"
/>
<Field id="side" name="side" component={inputField} type="select">
<option value={null}>Any</option>
<option value="Buy">Buy</option>
<option value="Sell">Sell</option>
</Field>
<Field id="status" name="status" component={inputField} type="select">
<option value={null}>Any</option>
<option value="Working">Working</option>
<option value="Completed">Completed</option>
</Field>
<Button name="submit-btn" className="filter-submit-btn" color="danger" type="submit">
Submit
</Button>
</FormGroup>
</Form>
我添加了一个className标签,但是我看到我添加的占位符都没有显示,也没有显示className.我该如何自定义每个字段？
我正在使用redux-form.我在州的输入字段中显示初始值.当我单击重置时,输入字段仍显示初始值.
如何重置输入字段？
这是我的代码:
const mapStateToProps = (state) => {
return {
initialValues: {
name:state.userInfo.data.name,
email:state.userInfo.data.email,
phone:state.userInfo.data.phone,
city:state.userInfo.data.city.name,
}
};
}
这就是我在输入字段中调用初始值的方法.
const renderField = ({ input, label, type, meta: { touched, error } }) => (
<div>
<input className="form-control control_new" {...input} placeholder={label} type={type}/>
{touched && ((error && <span>{error}</span>))}
</div>
)
<Field type="text" {...name} name="name" component={renderField} label="Enter Your Name" />
谢谢
我试图让Redux Form第一次工作,我收到以下错误:
删除了不变违反withRef.要访问包装的实例,请在连接的组件上使用ref.
我究竟做错了什么？一旦我写了(从示例中复制/粘贴)商店,就会抛出错误.
这是代码.
import React from "react";
import ReactDOM from "react-dom";
import { createStore, combineReducers } from 'redux'
import { reducer as formReducer } from 'redux-form'
const rootReducer = combineReducers({
form: formReducer
})
const store = createStore(rootReducer);
function App() {
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
我还创建了一个代码沙箱来显示问题:https://codesandbox.io/s/07xzolv60
我正在使用redux-form模糊验证.在我将第一个字符输入到输入元素后,它会失去焦点,我必须再次单击它才能继续输入.它只对第一个字符执行此操作.后续字符类型仍然是焦点.这是我的基本签到形式示例:
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Field, reduxForm } from 'redux-form';
import * as actions from '../actions/authActions';
require('../../styles/signin.scss');
class SignIn extends Component {
handleFormSubmit({ email, password }) {
this.props.signinUser({ email, password }, this.props.location);
}
renderAlert() {
if (this.props.errorMessage) {
return (
<div className="alert alert-danger">
{this.props.errorMessage}
</div>
);
} else if (this.props.location.query.error) {
return (
<div className="alert alert-danger">
Authorization required!
</div>
);
}
}
render() {
const { message, …我的输入字段在按键时没有更新:
import React, { Component, PropTypes } from 'react';
import { Field, reduxForm } from 'redux-form';
class CitySelector extends Component {
render() {
const { isFetching, pristine, submitting, handleSubmit } = this.props;
return (
<form className="form-horizontal col-xs-offset-1" onSubmit={handleSubmit(this.fetchWeather)}>
<div className="form-group">
<div className="col-md-4 col-xs-4">
<Field name="city"
component={city =>
<input type="text" className="form-control" {...city.input} placeholder="enter a city for a 5 day forecast"/>
}
/>
</div>
<div className="col-md-3 col-xs-3">
<button type="submit" className="btn btn-success">Submit</button>
</div>
</div>
</form>
);
}
}
export default reduxForm({
form: 'cityForm' …如何设置defaultValue输入组件？
<Field name={`${prize}.rank`} defaultValue={index} component={Input} type='text'/>
我试过上面但我的领域是空的.我正在尝试创建fieldArray(动态表单):
{fields.map((prize, index) =>
<div key={index} className="fieldArray-container relative border-bottom" style={{paddingTop: 35}}>
<small className="fieldArray-title marginBottom20">Prize {index + 1}
<button
type="button"
title="Remove prize"
className="btn btn-link absolute-link right"
onClick={() => fields.remove(index)}>Delete</button>
</small>
<div className="row">
<div className="col-xs-12 col-sm-6">
<Field name={`${prize}.rank`} defaultValue={index} component={Input} type='text'/>
<Field name={`${prize}.prizeId`} defaultValue={index} component={Input} type='text'/>
<Field
name={`${prize}.name`}
type="text"
component={Input}
label='Prize Name'/>
</div>
<div className="col-xs-12 col-sm-6">
<Field
name={`${prize}.url`}
type="text"
component={Input}
label="Prize URL"/>
</div>
<div className="col-xs-12">
<Field
name={`${prize}.description`}
type="text"
component={Input}
label="Prize Description" /> …我想以改变输入颜色的方式使用Redux-form并在页面顶部显示实际错误.如何访问字段本身之外的当前字段错误列表？
我试图围绕redux,react-redux和redux-form进行包装.
我已经设置了一个商店并添加了redux-form的reducer.我的表单组件如下所示:
登录表格
import React, {Component, PropTypes} from 'react'
import { reduxForm } from 'redux-form'
import { login } from '../../actions/authActions'
const fields = ['username', 'password'];
class LoginForm extends Component {
onSubmit (formData, dispatch) {
dispatch(login(formData))
}
render() {
const {
fields: { username, password },
handleSubmit,
submitting
} = this.props;
return (
<form onSubmit={handleSubmit(this.onSubmit)}>
<input type="username" placeholder="Username / Email address" {...username} />
<input type="password" placeholder="Password" {...password} />
<input type="submit" disabled={submitting} value="Login" />
</form> …的电流终极版型的文档(版本6.5.0在该写入时)中提到2个回调为Field对象:normalize和parse.
两种描述听起来非常相似:它们将用户输入的值输入到输入字段中,并将其转换为存储在redux中的值.
这两个回调有什么区别？
我想将自定义属性传递给我的Redux-Form-Field.在文档中它说:
传递给Field的任何自定义道具都将合并到与输入和元对象相同级别的props对象中.
但是将自定义道具传递给Field组件会引发编译错误:
<Field
name="E-Mail"
component={MaterialTextField}
myProp="Test"
/>
属性'myProp'在类型'上不存在(IntrinsicAttributes&IntrinsicClassAttributes>&...
在props属性中,我只能添加一组预定义的属性,如占位符或类型.传递另一个道具会抛出此错误:
<Field
name="E-Mail"
component={MaterialTextField}
props = {{
myProps: 'Test'
}}
/>
输入'{name:"E-Mail"; 组件:(props:any)=>元素; 道具:{myProps:string; }; }'不能赋值给''(IntrinsicAttributes&...
是否有可能将自定义道具传递给TypeScript中的Field组件？
redux-form ×10
reactjs ×8
redux ×8
javascript ×3
classname ×1
forms ×1
react-redux ×1
typescript ×1
validation ×1