react實現新增input框,Dropdown,日曆輸入的值

自定義action，例如此處，假設我的action為add,它放在目錄'../action/testAction'下方

import React, { Component } from 'react';
import { Form, Input, Dropdown, Button, Icon} from 'semantic-ui-react'
import './App.css';
import { addBox } from '../action/testAction'
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
const footOptions = [
	{ key: 'left', text: 'left', value: 'left' },
	{ key: 'right', text: 'right', value: 'right' }
]
class App extends Component {
	constructor(props) {
		super(props);
		this.handleChangeDate = this.handleChangeDate.bind(this);
		this.state = {
			inputTerm: [],
			startDate: new Date(),
			open: false
		}
	}
	handleChangeDate(date) {
		this.setState({
			startDate: date
		});
		console.log('startDate', this.state.startDate)
	}
	handleInputChange(Input, value) {
		let inputTerm = Object.assign([], this.state.inputTerm)
		inputTerm[Input] = value
		this.setState({ inputTerm: inputTerm })
		console.log('inputTerm', this.state.inputTerm)
	}
	close = () => this.setState({ open: false })
	submit() {
        const { add } = this.props;
        const addText = this.state.inputTerm;
        const time = this.state.startDate;
		const box = { addText, time };
		console.log('box',box);
        add(box,this)
    }
	render() {
		return (
			<div className="App">
				<Form>
					<div>新增input框,Dropdown,日曆輸入的值</div>
					<Input placeholder='text1' onChange={(e, data) => { this.handleInputChange('text1', e.target.value) }} />
					<Input placeholder='text2' onChange={(e, data) => { this.handleInputChange('text2', e.target.value) }} />
					<Dropdown placeholder='Select Foot' selection options={footOptions} onChange={(e, data) => { this.handleInputChange('foot', data.value); }} />
					<DatePicker selected={this.state.startDate} onChange={this.handleChangeDate} />
				</Form>
				<Button basic color='red' onClick={e => this.close()}>
					<Icon name='remove' />Cancel
                </Button>
				<Button color='green' onClick={e => this.submit()}>
					<Icon name='checkmark' />Add
                </Button>
			</div>
		);
	}
}
const mapStateToProp = state => ({
});
const mapDispatchToProp = dispatch => ({
    addBox: (box, self) => dispatch(addBox(box, self))
});
export default connect(mapStateToProp, mapDispatchToProp)(App)
 

testAction.js下方有函式add，add如果想要實現將資料儲存到資料庫，有兩種方法，一種是API，一種是graphql

API方法：具體如何實用檢視https://aws-amplify.github.io/docs/js/api#post

apiName, path根據你的aws-export檔案內的api名稱和路徑決定

export function addBox(box, self) {
    return async dispatch => {
        const myInit = {
            body: box,
            headers: {} // OPTIONAL
        };
        API.post(apiName, path, myInit).then(response => {
            console.log("response",response)
            self.setState({ open: false });
        }).catch(error => {
            console.log(error.response)
        });
    };
}
 

graphql方法：需要新建query,type,reducer,然後結合一起到action內的函式內使用，程式碼過多，此處就不貼上，有不懂的可以在評論下方諮詢