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

最新推荐文章于 2024-06-26 09:45:56 发布
最新推荐文章于 2024-06-26 09:45:56 发布
阅读量1.9k 收藏
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37815596/article/details/84971434
版权

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;

 

 

热爱前端的小君同学
关注
专栏目录
React实现一个带选择功能的输入框
08-23 1030
背景 遇到这样一个需求，在一个表单中实现一个带选择功能的输入框，既能输入又能选择。 开始 经过一番思考，有了一个初步的思路：使用Antd的下拉菜单和Input去做，页面加载的时候就去请求数据，然后在Input得到焦点的时候展开下拉菜单，失去焦点的时候收起菜单。 于是就写出了下面这样的代码: import { Form, Input, Menu } from 'antd' import P...
antd-react 组件库工作以来的总结
weixin_44457030的博客
11-13 1239
antd-react 组件库工作以来的总结
react 函数式组件动态增加input
火凤凰的博客
03-06 2014
function D1(props) { //定义数组 const [arr, setArrs] = useState([]); //增加项目方法 const addItem = (item) => { setArrs((oldItems) => [...oldItems.concat(item)]); }; //子组件 input 输入框 const Fitem = (props) => ( <> <Form.Item ...
推荐开源项目：React Dropdown - 简洁高效的下拉菜单解决方案
最新发布
gitblog_00049的博客
06-26 344
推荐开源项目：React Dropdown - 简洁高效的下拉菜单解决方案 项目地址:https://gitcode.com/trendmicro-frontend/react-dropdown 在前端开发领域，交互的细节往往决定着用户体验的优劣，而下拉菜单作为常用UI组件之一，其重要性不言而喻。今天，我们来深入探讨一个由Trend Micro前端团队维护的优秀开源项目——React Dropdo...
react实现添加input框,Dropdown,日历输入的值
12-12
react实现添加input框,Dropdown,日历输入的值，本人亲测有用
React-适用于React的优雅而炫酷的Dropdown组件
08-14
React-适用于React的优雅而炫酷的Dropdown组件
react-dropdown-tree-select:轻巧，可访问，可自定义且快速的React下拉树选择组件
04-30
React下拉树选择 React下拉树选择 一种轻量级且快速的控件，用于呈现可以显示分层树数据的选择组件。 另外，该控件以药丸形式显示选择，并允许用户搜索选项以进行快速过滤和选择。 还支持显示部分选定的节点。 目录 随着材料设计 作为单选 安装 作为NPM软件包 使用CDN 对等依赖 用法 道具 班级名称 clearSearchOnChange onChange onNodeToggle onAction 焦点 onBlur 数据 文字 keepTreeOnSearch keepChildrenOnSearch keepOpenOnSelect 模式 多选 等级制 simpleSelect radioSelect showPartiallySelected showDropdown 最初的 总是 表单状态（已禁用|只读） ID searchPredicate
formsy-semantic-ui-react:Formsy-React包装器，用于语义Ui-React的表单组件
05-02
Form , Input , TextArea , Checkbox , Radio , RadioGroup , Dropdown , Select , } from 'formsy-semantic-ui-react' ; // ES5 var Form = require ( 'formsy-semantic-ui-react' ) . Form ; /** and so on for ...
react➕antd中使用switch...case...
xiaohong的博客
05-22 1465
1，使用switch...case...效果 2，主要代码 switch (num) { case 1 : return (<span>{}</span>); break; case 2 : return (<span> {}</span>); break; d...
yarn与npm安装的项目有时候会报错
react6的博客
06-10 1389
包的依赖升级后出现的错误问题 antd@^4.5.2: version "4.9.3" resolved "https://registry.npm.taobao.org/antd/download/antd-4.9.3.tgz#a9666fe3d7e0b18818e7f8bdb81abbf8a4a3e7d2" integrity sha1-qWZv49fgsYgY5/i9uBq7+KSj59I= dependencies: "@ant-design/colors" "^5.0.
Error: Cannot find module ‘umi‘ 问题处理
热门推荐
LDR1109的博客
04-23 1万+
最近接触ant design，再上手的时候，老是会碰到，找不到某某模块的问题，上网搜了一下，发现很多都不能解决问题。 后来，发现可以通过 yarn add 模块名 的方式，处理这种Error, 如: yarn add umi 记录一下，希望也可以帮到您！ NangongYi@LAPTOP-AKD59FEP MINGW64 /d/web/html/ant/myapp $ yarn add umi yarn add v1.22.10 info No lockfile found. [1/4] .
react-dropdown-select:可自定义的下拉菜单用于做出React
04-28
React下拉选择 可自定义的下拉菜单用于做出React 特征 可通过prop s配置 通过渲染道具回调（可访问内部道具，状态和方法），所有内部组件的总自定义组件覆盖 可通过CSS（或自定义组件）设置样式 门户支持在本地DOM树之外呈现下拉菜单。 例如在document.body 自动位置 小捆 安装 npm install --save react-dropdown-select 网站 动机 react-select非常好，但是有时项目要求超出了它的能力范围 用法 进口： import Select from "react-dropdown-select"; 并用作： < Select options = { options } onChange = { ( values ) => this . setValues ( values ) } / > options和onChan
react-select-dropdown:演示版
05-11
React选择下拉菜单 安装 npm install react-select-dropdown 可以与browserify和React一起使用。 定义 var SelectDropdown = require('react-select-dropdown'); 用法 var ReactSelectDropdownApp = React.createClass({ getInitialState: function(){ return { items: [{name: 'Item One'}, {name: 'Item Two'}, {name: 'Item Three'}, {name: 'Item Four'}],selected: 1 }; }, onItemSelected: function(item){ console.log('You
react-dropdown:React React的一个简单的下拉组件
05-06
React下拉 受React 启发的React的简单Dropdown组件 为什么 默认HTML select元素很难设置样式 有时我们还希望将菜单分组 如果要进行更高级的选择，请选中 安装 // with npm $ npm install react-dropdown --save // with yarn $ yarn add react-dropdown 变更日志 如果要在v0.13下支持React版本，请使用react-dropdown@v0.6.1 用法 这是react-dropdown的基本用法 import Dropdown from 'react-dropdown' ; import 'react-dropdown/style.css' ; const options = [ 'one' , 'two' , 'three' ] ; const defaultOpti
react-phone-number-input：国际电话号码输入的React组件
02-19
React电话号码输入 React的国际电话号码<input/> 。 安装 npm install react-phone-number-input --save 如果您不使用捆绑器，请使用的。 该组件使用进行电话号码解析和格式化。 使用 该组件有两个变体：“有国家选择”和“无国家选择”。 与国家选择 “使用国家/地区选择”组件需要两个属性： value和onChange(value) 。 。 import 'react-phone-number-input/style.css' import PhoneInput from 'react-phone-number-input' function Example ( ) { // `value` will be the parsed phone number in E.164 format. // Example: "+121
React中Form表单事件（input CheckBox radio 取值操作）
WebView
11-15 7142
1、常见的表单包括输入框，单选框，复选框，下拉框和多文本框，本次主要总结它们在react中如何取值。 2、输入框
React 入门课程-声明周期函数-受控表单input select radio textarea checkbox
qq_27009517的博客
01-13 279
第一章 接触React 第一节 React概述 第二节 使用 React 第二章 元素渲染 第一节 React 元素 第二节 将 React 元素渲染为 DOM 第三章 JSX 第一节 从本质上了解JSX 第二节 JSX的使用 第三节 JSX的属性 第四章 组件与 props 属性 第一节 组件类型及渲染方式 第二节 灵活使用组件（上） 第三节 灵活使用组件（下） 第四节 props 属性重现 第五章 事件处理 第一节 事件绑定的方式 第二节 向事件处理程序传递参数 第六章 组件的
react form表单 input和textarea用法
前端岚枫
03-21 1万+
在 HTML 中，表单元素如 ， 和 表单元素通常保持自己的状态，并根据用户输入进行更新。而在 React 中，可变状态一般保存在组件的 state(状态) 属性中，并且只能通过 setState() 更新 我们可以通过使 React 的 state 成为 “单一数据源原则” 来结合这两个形式。然后渲染表单的 React 组件也可以控制在用户输入之后的行为。这种形式，其值由 React 控制的...
React移动端Radio组件
麦子
05-12 743
一、组件如图所示： 二、使用方法： import Radios from '../../components/Radio/index'; import './index.less'; const Template = () => { const [value, setValue] = useState(1); const onChange = value => { console.log(value); setValue(value); }; cons
react如何判断input框有值时禁用
07-14
在React中，你可以使用状态来判断input框是否有值，并根据其值来禁用或启用其他元素。 首先，在你的组件中定义一个状态来保存框的值，可以useState钩子函数来创建状态： ```jsx React, { useState } from 'react'...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值