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

亦凉 2022-04-05 11:44 400阅读 0赞

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][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][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/][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;

[https_aws-amplify.github.io_docs_js_api_post]: https://aws-amplify.github.io/docs/js/api#post
[https_react.semantic-ui.com_addons_radio_types-radio-group]: https://react.semantic-ui.com/addons/radio/#types-radio-group
[https_ant.design_components_select-cn]: https://ant.design/components/select-cn/