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);
...其他几个也注意绑定一下bind
this.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.checked
this.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] = 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} />
<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.checked
this.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.checked
this.setState({checkboxGroup:obj})
console.log('this.state.checkboxGroup',this.state.checkboxGroup)
}
handleInputChange(Input, value) {
let inputTerm = Object.assign([], this.state.inputTerm)
inputTerm[Input] = value
this.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 (
<PhoneInput
country="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 (
<Select
onChange={this.onSelectChange}
className="bli_Select"
showSearch
placeholder="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;
类似资料：