我使用 - 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>

    &nbsp;<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);