Question

我创建了一个友好列表应用程序，它显示数据并执行某些操作，如添加和编辑删除我想创建一个添加页面，将详细信息添加到列表中。我可以推送数据并将其显示在表格中？我想使用redux-forms添加页面。

这是完整的项目代码 -

减速器/ index.js -

import {combineReducers} from 'redux';
import Friends from './static'
import { reducer as formReducer } from 'redux-form'


const rootReducer=combineReducers({
  friends:Friends,
  form:formReducer
});

export default rootReducer;

减速器/ static.js

export default function(){
  return [{
    key: 1,
    name: 'Steve',
    phone: '8974645875',
    email: 'steva@gmail.com',
    work: 'Doctor',
    city: 'newyork',
  }, {
    key: 2,
    name: 'Smith',
    phone: '9424645875',
    email: 'smith@gmail.com',
    work: 'Architect',
    city: 'newyork',
  }, {
    key: 3,
    name: 'Bella',
    phone: '9546855875',
    email: 'bel@outlook.com',
    work: 'Engg',
    city: 'newyork',
  }, {
    key: 4,
    name: 'Rk',
    phone: '7544645875',
    email: 'rk@gmail.com',
    work: 'Engg',
    city: 'newyork',
  }];
}

App.js

import React, { Component } from 'react';
import {friendlist} from '../actions/index'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import {Link} from 'react-router-dom'
import showResults from '../showResults';

class FriendList extends Component {
  render(){
    console.log('ADD',this.props.friends.friends)
   let filteredFriends=this.props.friends.friends.filter(
     (friend)=>{     
      return   Object.values(friend).indexOf(this.state.search)!==-1;     
   }
   );
   let newdat=this.props.location.newdata;
   let id,name,phone,email,work,city;
   if(newdat){
          id=Math.floor((Math.random()*100)+1);
          name=this.props.location.newdata.name;
          phone=this.props.location.newdata.phone;
          email=this.props.location.newdata.email;
          work=this.props.location.newdata.work;
          city=this.props.location.newdata.city;
          filteredFriends=filteredFriends.concat({name,phone,email,work,city});
          console.log('FILTEREDDATA',filteredFriends)

     let newArray = this.props.friends.friends.slice();
     newArray.push({id,name,phone,email,work,city});
    this.setState(this.props.friends.friends);

   }

   console.log("STATE",this.state,'LIST',filteredFriends,'NEW Array')

    let rows=filteredFriends.map(friend => {

      return   <tr>
          <td>
            { friend.name }
          </td>
          <td>
            { friend.phone }
          </td>
          <td>
            { friend.email }
          </td>
          <td>
            { friend.work }
          </td>
          <td>
            { friend.city }
          </td>
          <td><input type="checkbox"/>Important</td>
          <td><button><Link to={{pathname: '/edit',  state: { key: friend.key,phone:friend.phone,name:friend.name,email:friend.email,work:friend.work,city:friend.city }}}>
      Edit</Link></button></td>
        </tr>

    })
    return <div>
    <div className="header"><h1>Friendlist</h1><hr/></div>

    <center><br/>
    <div >
    <table>
        <thead>
      <tr>
        <th>Name</th>
        <th>Phone number</th>
        <th>Email</th>
        <th>Work</th>
        <th>City</th>
        <th>Mark as Important</th>
        <th>Edit</th>
      </tr>
    </thead>
      <tbody>{rows}</tbody>
    </table>
  </div>
    </center>
</div>
}
}

const mapStateToProps = (state) => {
  return {
    friends:state
  };
}

const mapDispatchToProps = (dispatch) => {
  return bindActionCreators({friendlist:friendlist},dispatch);
  }

const List = connect(
  mapStateToProps,
  mapDispatchToProps
)(FriendList)

export default List

add.js

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import showResults from './showResults';
import AddFriend from './AddFriend';
import {createStore} from 'redux'
import reducers from './reducers'

export default class AddNew extends Component{
  render() {
    return (
    <div style={{ padding: 150 }}>
      <AddFriend/>
    </div>
  )}
  }

AddFriend.js

import React from 'react';
import { Field, reduxForm } from 'redux-form';

const AddFriend = props => {
  const { handleSubmit, pristine, reset, submitting } = props;
  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>Name</label>
        <div>
          <Field
            name="name"
            component="input"
            type="text"
            placeholder="Name"
          />
        </div>
      </div>
      <div>
        <label>Phone</label>
        <div>
          <Field
            name="phone"
            component="input"
            type="text"
            placeholder="Phone"
          />
        </div>
      </div>
      <div>
        <label>Email</label>
        <div>
          <Field
            name="email"
            component="input"
            type="email"
            placeholder="Email"
          />
        </div>
      </div>
      <div>
        <label>Work</label>
        <div>
          <Field
            name="work"
            component="input"
            type="text"
            placeholder="Work"
          />
        </div>
      </div>
      <div>
        <label htmlFor="employed">City</label>
        <div>
          <Field
            name="city"
            component="input"
            type="text"
            placeholder="City"
          />
        </div>
      </div>
      <div>
        <button type="submit">Submit</button>
        <button type="button" onClick={reset}>
          Clear Values
        </button>
      </div>
    </form>
  );
};

export default reduxForm({
  form: 'newfriend', // a unique identifier for this form
  fields: ['name', 'phone','email','work','city'],
})(AddFriend);

任何人都可以帮我这样做。添加数据后，在友好列表列表中添加数据，添加的数据列在表中。

Answer 1

将onSubmit处理程序传递给Redux表单，如

Redux表单调用组件

import {addFriendAction} from './path/to/action'
...
handleSubmit = (values) => {
    var data = {
        name: values.name,
        email: values.email,
        phone: values.phone,
        work: values.work,
        city: values.city
    }
    this.props.addFriendAction(data)
}
...
<FriendForm onSumit={this.handleSubmit} />
...

function mapDispatchToProps(dispatch) {
    return bindActionCreators({addFriendAction}, dispatch)
}

export default connect(null, mapDispatchToProps)(MyComponent);

将您的FriendForm更改为onsubmit并使用reduxForm中的Field

const FriendForm=({addFriend,fields:{name,phone,email,work,city},handleSubmit})=>(
  <form onSubmit={handleSubmit}>
    <center>
    <div>
      <label>First Name</label>
      <Field type="text" component="input" placeholder="Name" name="name"/>
    </div>
    <div>
      <label>Last Name</label>
      <Field type="text" component="input" placeholder="Phone" name="phone" />
    </div>
    <div>
      <label>Email</label>
      <Field type="text" component="input" placeholder="Email" name="email"/>
    </div>
    <div>
      <label>Work</label>
      <Field type="text" component="input" placeholder="Work" name="work"/>
    </div>
    <div>
      <label>City </label>
      <Field type="text" component="input" placeholder="City" name="city"/>
    </div>
    <button type="submit">Submit</button>
  </center>
  </form>
)


export default reduxForm({
  form: 'friend', // a unique name for this form
  fields: ['name', 'phone', 'email','work','city']
})(FriendForm);

你的行动看起来像

export function addFriendAction(data) {
    return {type: 'ADD_FRIEND', payload: data}
}

然后更新reducer

const FriendListReducer = (state = initialState, action ) => {
     switch(action.type) {
          case 'ADD_FRIEND': 
                return {...state, friends: action.payload}
          ...
          default: return state

     }
}

如何在react中通过redux-forms添加数据来存储？

1 个答案: