-1
私は、データを表示し、削除や追加などの特定の操作を実行するフレンドリストアプリケーションを作成しました。リストに詳細を追加する追加ページを作成したいのですが、データをプッシュしてテーブルに表示できますか？ と私は追加ページのために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: '[email protected]',
work: 'Doctor',
city: 'newyork',
}, {
key: 2,
name: 'Smith',
phone: '9424645875',
email: '[email protected]',
work: 'Architect',
city: 'newyork',
}, {
key: 3,
name: 'Bella',
phone: '9546855875',
email: '[email protected]',
work: 'Engg',
city: 'newyork',
}, {
key: 4,
name: 'Rk',
phone: '7544645875',
email: '[email protected]',
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);
を更新することは、まずあなたがして嬉しいフォーム –