Javascript Redux:表单输入字段保持空白
我使用安装了Javascript Redux:表单输入字段保持空白,javascript,reactjs,react-jsx,redux-form,react-boilerplate,Javascript,Reactjs,React Jsx,Redux Form,React Boilerplate,我使用安装了redux表单,连接了减速器,并检查它在redux devtools中是否正常运行 我可以看到,在键入时操作流是良好的,但每次击键后表单值和输入都是空的 控制台中没有错误,我找不到任何线索 我遗漏了一些小东西,可能是组件渲染,也可能是关于react版本 我的包裹: "react": "15.3.2", "redux-form": "^6.2.0", 我的登入表格: import React from 'react'; import { Field, reduxForm } from
redux表单
,连接了减速器,并检查它在redux devtools中是否正常运行
我可以看到,在键入时操作流是良好的,但每次击键后表单值和输入都是空的
控制台中没有错误,我找不到任何线索
我遗漏了一些小东西,可能是组件渲染,也可能是关于react版本
我的包裹:
"react": "15.3.2",
"redux-form": "^6.2.0",
我的登入表格:
import React from 'react';
import { Field, reduxForm } from 'redux-form/immutable';
const renderField = ({ input, label, type, meta: { touched, error } }) => {
console.log(input);
return (
<div>
<label>{label}</label>
<div>
<input {...input} placeholder={label} type={type} />
{touched && error && <span>{error}</span>}
</div>
</div>
);
};
class FormLogin extends React.Component { // eslint-disable-line react/prefer-stateless-function
static propTypes = {
handleSubmit: React.PropTypes.func
};
render() {
const { error, handleSubmit } = this.props;
return (
<div>
<input type="text" name="ah1" />
<form onSubmit={handleSubmit}>
<input type="text" name="ah2" />
<div>
<Field id="username" name="username" type="text" component={renderField} label="Username" />
</div>
<div>
<Field id="password" name="password" type="text" component={renderField} label="Password" />
</div>
{error && <strong>{error}</strong>}
<button type="submit">Submit</button>
</form>
</div>
);
}
}
export default reduxForm({
form: 'FormLogin'
})(FormLogin);
从“React”导入React;
从'redux form/immutable'导入{Field,reduxForm};
常量renderField=({input,label,type,meta:{toucted,error}})=>{
控制台日志(输入);
返回(
{label}
{触摸&&error&&{error}
);
};
类FormLogin扩展了React.Component{//eslint禁用行React/prefere无状态函数
静态类型={
handleSubmit:React.PropTypes.func
};
render(){
const{error,handleSubmit}=this.props;
返回(
{error&&{error}}
提交
);
}
}
导出默认reduxForm({
表单:“FormLogin”
})(FormLogin);
如果有人来这里寻找答案,就会发现问题
有一种方法可以修复它。
您可以在此处找到更多信息:
如果有人来这里寻找答案,就会发现问题所在 有一种方法可以修复它。 您可以在此处找到更多信息:
对于我来说,我没有按照示例中的确切名称命名减速器,这不幸导致了这个难以调试的错误
确保减速器如示例所示列为“form:formReducer”。对于我来说,我没有按照示例中的确切名称命名减速器,这不幸导致了这个难以调试的错误
确保减速器如示例所示列为“form:formReducer”。不再是黑客,redux form似乎可以直接使用其不可变库使用react样板文件-不再是黑客,redux form似乎可以直接使用其不可变库使用react样板文件-你是我的英雄!你是我的英雄!