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内的函数内使用,代码过多,此处就不粘贴,有不懂的可以在评论下方咨询