[英]redux-form: Dynamically defining handleSubmit
Since I am pretty new to the React ecosystem my description and way of doing things may be way off but I hope you can follow my issue. 由于我对React生态系统很陌生,我的描述和做事方式可能会有所不同,但我希望你能够关注我的问题。
I have a parent Component that gets a form injected from the router and maps state and the action creators to the properties. 我有一个父组件,它获取从路由器注入的表单,并将状态和操作创建者映射到属性。
Container.js Container.js
import * as actionCreators from "../actionCreators";
export default class ComponentA extends React.Component {
render() {
return (
<div className="ComponentA">
{this.props.children} //<--Form
</div>
);
}
}
function mapStateToProps(state) {
return {
listItems: state.get("listItems")
};
}
export const Container = connect(mapStateToProps, actionCreators)(ComponentA);
The component that gets render with {this.props.children}
is the following form. 使用
{this.props.children}
进行渲染的组件是以下形式。
Form.js Form.js
class Form extends React.Component {
static propTypes = {
fields: PropTypes.object.isRequired,
handleSubmit: PropTypes.func.isRequired
};
render() {
const { fields: {title, description}, handleSubmit} = this.props;
return (
<div className="create-project-form">
<h1>Create Project</h1>
<form onSubmit={handleSubmit}>
<label htmlFor="title">Title</label>
<input type="text" name="title" id="title" className="form-control"/>
<label htmlFor="description">Description</label>
<textarea name="description" id="" cols="30" rows="10" className="form-control"></textarea>
<button className="btn btn-danger" onClick={handleSubmit}>Create</button>
</form>
</div>
)
}
}
export default connectReduxForm({
form: "from",
fields: ["title", "description"]
})(Form);
Router 路由器
const routes = <Route component={App}>
<Route path="/" component={Container}/>
<Route path="/a" component={Container}>
<Route path="/a/create" component={Form}/>
</Route>
</Route>;
render(
<div>
<Provider store={store}>
<Router>{routes}</Router>
</Provider>
</div>,
document.getElementById("content"));
The Problem is handleSubmit
is not undefined, but it is non of my actions. 问题是
handleSubmit
没有未定义,但它不是我的行为。 I actually don't expect that it is magically set to the correct actionCreator but how do I pass in the function? 我实际上并不指望它被神奇地设置为正确的actionCreator,但我如何传递函数? I tried the action name instead of
handleSubmit
but then the function is undefined. 我尝试了动作名称而不是
handleSubmit
但是函数未定义。 Every example I saw passes the handleSubmit function manually into the Form component, but I can't do that because the Form is set by the Router. 我看到的每个例子都将handleSubmit函数手动传递给Form组件,但我不能这样做,因为Form是由Router设置的。
thanks 谢谢
Two things: 两件事情:
<input>
. <input>
。 <input type="text" {...title} // <-------- that (it contains the "name" prop) className="form-control"/>
handleSubmit
: handleSubmit
: <form onSubmit={handleSubmit(data => { // do your submit stuff here and return a Promise if you want the // this.props.submitting flag to be set for the duration of the promise })}>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.