react实现添加input框,Dropdown,日历,textarea,select,radio,checkbox输入的值

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.handleCheck = this.handleCheck.bind(this);this.handleRadio1 = this.handleRadio1.bind(this);this.handleRadio2 = this.handleRadio2.bind(this);this.handleRadio3 = this.handleRadio3.bind(this);...其他几个也注意绑定一下bindthis.state = {inputTerm: [],startDate: new Date(),open: false,selectedValue: 'option1',radio_one: false,radio_two: false,radio_three: false,checkboxGroup:{state1:false,state2:true,state3:false}}}handleCheck(event){let obj = Object.assign(this.state.checkboxGroup)obj[event.target.value]=event.target.checkedthis.setState({checkboxGroup:obj})console.log('this.state.checkboxGroup',this.state.checkboxGroup)}handleRadio1() {this.setState({radio_one: !this.state.radio_one,radio_two: false,radio_three: false});}handleRadio2() {this.setState({radio_two: !this.state.radio_two,radio_one: false,radio_three: false});}handleRadio3() {this.setState({radio_three: !this.state.radio_three,radio_one: false,radio_two: false});}handleSelectChange(event){this.setState({selectedValue:event.target.value})console.log('selectedValue',this.state.selectedValue)}handleChangeDate(date) {this.setState({startDate: date});console.log('startDate', this.state.startDate)}handleInputChange(Input, value) {let inputTerm = Object.assign([], this.state.inputTerm)inputTerm[Input] = valuethis.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} /><textarea placeholder='text3' onChange={(e, data) => { this.handleInputChange('text3', e.target.value) }} /><Dropdown placeholder='Select Foot' selection options={footOptions} onChange={(e, data) => { this.handleInputChange('foot', data.value); }} /><select value={this.state.selectedValue} onChange={this.handleSelectChange}><option value="option1">option1</option><option value="option2">option2</option><option value="option3">option3</option></select><input type="radio" name="radioGroup" value="radio_one" onChange={this.handleRadio1} /><input type="radio" name="radioGroup" value="radio_two" onChange={this.handleRadio2} /><input type="radio" name="radioGroup" value="radio_three" onChange={this.handleRadio3} /><input type="checkbox" name="checkboxGroup" value="state1" checked={this.state.checkboxGroup['state1']} onChange={this.handleCheck} /><input type="checkbox" name="checkboxGroup" value="state2" checked={this.state.checkboxGroup['state2']} onChange={this.handleCheck} /><input type="checkbox" name="checkboxGroup" value="state3" checked={this.state.checkboxGroup['state3']} onChange={this.handleCheck} /></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内的函数内使用，代码过多，此处就不粘贴，有不懂的可以在评论下方咨询

• 获取checkbox的值

方法一：

import React, { Component } from 'react';
import './App.css';
class App extends Component {constructor(props) {super(props);this.state = { checked: false, checked2: false };this.handleChange = this.handleChange.bind(this);this.handleChange2 = this.handleChange2.bind(this);}handleChange() {this.setState({ checked: !this.state.checked })console.log(!this.state.checked)}handleChange2() {this.setState({ checked2: !this.state.checked2 })console.log(!this.state.checked2)}render() {return <div><div><label>Check 1</label><input type="checkbox" id="chk1" className="chk11" checked={this.state.checked} onChange={this.handleChange} /><label>Check 2</label><input type="checkbox" id="chk2" className="chk22" checked={this.state.checked2} onChange={this.handleChange2} /></div></div>;}
}
export default App

方法二：

import React, { Component } from 'react';
import './App.css';
class App extends Component {constructor(props) {super(props);this.handleCheck = this.handleCheck.bind(this);this.state = {checkboxGroup:{state1:false,state2:true,state3:false}}}handleCheck(event){let obj = Object.assign(this.state.checkboxGroup)obj[event.target.value]=event.target.checkedthis.setState({checkboxGroup:obj})console.log('this.state.checkboxGroup',this.state.checkboxGroup)}render() {return (<div className="App"><input type="checkbox" name="checkboxGroup" value="state1" checked={this.state.checkboxGroup['state1']} onChange={this.handleCheck} /><input type="checkbox" name="checkboxGroup" value="state2" checked={this.state.checkboxGroup['state2']} onChange={this.handleCheck} /><input type="checkbox" name="checkboxGroup" value="state3" checked={this.state.checkboxGroup['state3']} onChange={this.handleCheck} /></div>);}
}
export default App

• 下面这段代码可以主要是为了呈现清空效果

import React, { Component } from 'react';
import { Form, Input,  Button} from 'semantic-ui-react'
import './App.css';
class App extends Component {constructor(props) {super(props);this.handleInputChange = this.handleInputChange.bind(this);this.handleCheck = this.handleCheck.bind(this);this.state = {inputTerm: [],inputclear:'',checkboxGroup:{state1:false,state2:false,state3:false}}}handleCheck(event){let obj = Object.assign(this.state.checkboxGroup)obj[event.target.value]=event.target.checkedthis.setState({checkboxGroup:obj})console.log('this.state.checkboxGroup',this.state.checkboxGroup)}handleInputChange(Input, value) {let inputTerm = Object.assign([], this.state.inputTerm)inputTerm[Input] = valuethis.setState({ inputTerm: inputTerm })console.log('inputTerm', this.state.inputTerm)}clear = () => this.setState({checkboxGroup:{state1:false,state2:false,state3:false},inputTerm:{text1:'',text2:'',}})submit() {this.clear();}render() {return (<div className="App"><Form ref="form"><Input placeholder='text1' value={this.state.inputTerm.text1||''} onChange={(e, data) => { this.handleInputChange('text1', e.target.value) }}  ref={(Input) => this.Input = Input}/><Input placeholder='text2' value={this.state.inputTerm.text2||''} onChange={(e, data) => { this.handleInputChange('text2', e.target.value) }} /><input type="checkbox" name="checkboxGroup" value="state1" checked={this.state.checkboxGroup['state1']} onChange={this.handleCheck} /><input type="checkbox" name="checkboxGroup" value="state2" checked={this.state.checkboxGroup['state2']} onChange={this.handleCheck} /><input type="checkbox" name="checkboxGroup" value="state3" checked={this.state.checkboxGroup['state3']} onChange={this.handleCheck} /></Form><Button floated='right'  onClick={e => this.submit()}>submit</Button><Button floated='right'  onClick={e => this.clear()}>Reset</Button></div>);}
}
export default App

• 单选按钮建议使用此方法：

https://react.semantic-ui.com/addons/radio/#types-radio-group

• semantic-ui-react select获取onchange

import React, { Component } from "react";
import { Select } from 'semantic-ui-react'
import "semantic-ui-css/semantic.min.css";
const monthOptions = [{ key: '1', value: '1', text: '1' },{ key: '2', value: '2', text: '2' },{ key: '3', value: '3', text: '3' },{ key: '4', value: '4', text: '4' },{ key: '5', value: '5', text: '5' },{ key: '6', value: '6', text: '6' },{ key: '7', value: '7', text: '7' },{ key: '8', value: '8', text: '8' },{ key: '9', value: '9', text: '9' },{ key: '10', value: '10', text: '10' },{ key: '11', value: '11', text: '11' },{ key: '12', value: '12', text: '12' }
]
class App extends Component {constructor(props) {super(props);this.state = {monthValue: ""}this.handleSelectChange = this.handleSelectChange.bind(this)}handleSelectChange(e, data){console.log(data.value);this.setState({monthValue:data.value})}render() {return (<div style={
   {textAlign: "center"}}><Select placeholder='Month' value={this.state.monthValue} options={monthOptions} onChange={this.handleSelectChange} /></div>);}
}
export default App;

• 电话输入组件

import React, { Component } from "react";
import 'react-phone-number-input/style.css'
import PhoneInput from 'react-phone-number-input'
class App extends Component {constructor(props) {super(props);this.state = {phone: ""}}onChange(phone){console.log("phone",phone)this.setState({phone:phone})}render() {return (<PhoneInputcountry="US"  //设置默认国家placeholder="Enter phone number"value={ this.state.phone }onChange={ phone => this.onChange(phone) } />);}
}
export default App;

select建议：https://ant.design/components/select-cn/

（推荐理由：可以允许用户输入）

import React, { Component } from "react";
import { Select } from "antd";
import "antd/dist/antd.css";
class App extends Component {constructor(props) {super(props);this.state = {}this.onSelectChange = this.onSelectChange.bind(this);}onSelectChange(value) {console.log("value", value)}render() {const { Option } = Select;return (<SelectonChange={this.onSelectChange}className="bli_Select"showSearchplaceholder="Select SiteId"optionFilterProp="children"filterOption={(input, option) =>option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}>{this.props.filterGroup &&this.props.filterGroup.map((group, i) => {return (<Option value={group} key={"group" + i}>{group}</Option>);})}</Select>);}
}
export default App;