react-redux实现监听多个输入框值，新增数据。一整套代码
1.mutation.js中
export const createSupportRecord = `mutation createSupportRecord($support: CreateSupportRecordInput!) {
createSupportRecord(input: $support ) {
id
time
supporter
problems
comments
userId
}
}
`;2.types.js
export const ADD_SUPPORT = "add_support";3.addReducer.js
import React, { Component } from "react";
import * as TYPES from "../types/types";
const initialState = {
listViews: []
};
export default function viewsList(state = initialState, action) {
switch (action.type) {
case TYPES.ADD_REVIEW:
return {
...state,
listViews: action.text
};
default:
return state;
}
}
export default function supportsList(state = initialState, action) {
switch (action.type) {
case TYPES.ADD_SUPPORT:
return {
...state,
listViews: action.text
};
default:
return state;
}
}4.addAction.js
import React, { Component } from "react";
import * as TYPES from "../types/types";
import { createSupportRecord } from "../graphql/mutations";
import { graphqlOperation, API } from "aws-amplify";
export function getAddSupport(support) {
return async dispatch => {
try{
const newEvent = await API.graphql(graphqlOperation(createSupportRecord,{support}));
if (newEvent) {
dispatch(updateAddSupports(newEvent.data.createSupportRecord.items));
window.location.reload();
}
}catch(err){
console.log('getAddSupport exception: ',err);
}
};
}
function updateAddSupports(supportsList) {
return {
type: TYPES.ADD_SUPPORT,
text: supportsList
};
}
5.AddSupport.js
import React, { Component } from 'react'
import { Modal, Button, Form, Input, Icon, Header, Label, Dropdown } from 'semantic-ui-react'
import './AddSupport.css'
import {connect} from 'react-redux';
import {getPatientStatus} from '../action/patientAction'
import {getAddSupport} from '../action/addAction'
class addSupport extends Component {
constructor(props) {
super(props)
this.handleInputChange.bind(this)
this.submit.bind(this)
this.supports=[]
}
state = { open: false, supports: [], supportTime:'',supportSupporter:'',supportProblems:'',supportComments:''}
handleOpen = () => this.setState({ open: true })
close = () => this.setState({ open: false })
submit() {
const{getAddSupport} = this.props;
const time = this.state.supportTime;
const supporter = this.state.supportSupporter;
const problems = this.state.supportProblems;
const comments = this.state.supportComments;
const support = {time,supporter,problems,comments,userId:this.props.patientStatus.userId};
getAddSupport(support);
}
handleInputChange(field, value) {
switch(field){
case 'time':
this.setState({supportTime:value});
break;
case 'supporter':
this.setState({supportSupporter:value});
break;
case 'problems':
this.setState({supportProblems:value});
break;
case 'comments':
this.setState({supportComments:value});
break;
default:
break;
}
}
render() {
const { open } = this.state
return (
Add Support Records}
open={open}
className='add-box-form-container'
>
Add Support Records