React Redux Redux表单列表主表单应用程序

Question

我使用 - React Redux和Redux表单

我有一个用户列表表格，其中包含目录 编辑/删除每行右侧的按钮。当我点击 在编辑按钮上，它应该将当前行值传递给用户主窗体。 在表单的底部，我有一个addnew按钮，可以重定向到用户主窗体。

我的要求是当我点击addnew时，它应该打开带有空字段的用户主表单， 当我单击表格行上的编辑按钮时，它应该打开用户主表单，其中包含预先填充的字段 当前选定的行值。

我怎样才能做到这一点。请帮忙。提前谢谢。

对于Ex：

我的UserList.js表格

renderUsers（）{

返回this.props.users.reverse（）。map（user =＆gt; {

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（{users}）{

return {users}; }

export default connect（mapStateToProps，{fetchUsers}）（UserList）;

我的User.js表格

const User =（）=＆gt; {   返回（     

  <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}）=＆gt; {

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>

);

} }

导出默认的reduxForm（{

验证

form：'usermainForm'，

destroyOnUnmount：false  }）（UserMainForm）;