我使用 - React Redux和Redux形式
我有一个用户列表表单,其中包含每行右侧带有编辑/删除按钮的目录 . 当我单击编辑按钮时,它应该将当前行值传递给用户主窗体 . 在表单的底部,我有一个addnew按钮,重定向到用户主窗体 .
我的要求是,当我点击addnew时,它应该打开带有空字段的用户主窗体,当我单击表格行上的编辑按钮时,它应该打开用户主窗体,其中预先填充的字段包含当前选定的行值 .
我怎样才能做到这一点 . 请帮忙 . 提前致谢 .
对于Ex:
我的UserList.js表单
renderUsers(){
return this.props.users.reverse() . map(user => {
return (
<tbody key={user._id}>
<tr key={user._id}>
<td>{user.email}</td>
<td>{user.firstname}</td>
<td><Link id={user._id} to="#" onClick={() => this.onDeleteUser(user._id)}>
<i className="material-icons">delete</i></Link>
<Link id={user._id} to="user/new"
onClick={ () => here I have to call usermain form sending the current row values}>
<i className="material-icons">edit</i></Link></td>
</tr>
</tbody>
);
});
}
render(){
回来(
<div>
<div><h4>User List</h4></div><hr />
<table className="bordered highlight responsive">
<thead>
<tr>
<td>Email</td>
<td>First Name</td>
行动
{this.renderUsers()}
</table>
);
}}
function mapStateToProps(){
return ; }
export default connect(mapStateToProps,)(UserList);
我的User.js表单
const User =()=> {return(
<UserList />
<div className="fixed-action-btn">
<Link to="user/new" className="btn-floating btn-large waves-effect waves-light red">
<i className="material-icons">add</i>
</Link>
</div>
</div>
); };
导出默认用户;
我的UserMain.js表单
UserMainForm类扩展Component {
renderFields(){
return _.map(userFields,({label,name})=> {
return (
<Field
key={name}
component={UserField}
label={label}
name={name}
/>
);
});
}
render(){
回来(
<div className="container" style={{marginBottom:'5px'}}>
<div><h4>User Main { mode Edit/New}</h4></div><hr />
<form className="container" onSubmit={this.props.handleSubmit(() =>
this.props.submitUser(this.props.usermainForm.values,this.props.history))}>
<div className="row">
{this.renderFields()}
</div>
<Link to="/register/user" className="red btn-flat white-text">
Cancel
</Link>
<button type="submit" className="waves-effect waves-teal teal btn-flat right white-text">
Save
<i className="material-icons right">done</i>
</button>
</form>
</div>
);
}}
export default reduxForm({
验证,
form:'usermainForm',
destroyOnUnmount:false})(UserMainForm);