三、数据录入组件(1)

最新推荐文章于 2024-02-02 16:13:49 发布

谁诉离殇~

最新推荐文章于 2024-02-02 16:13:49 发布

阅读量419

点赞数

分类专栏：框架(level 1) # React系列(level 2) # antd(level 3) 文章标签：前端 javascript html

本文链接：https://blog.csdn.net/rocktanga/article/details/121328590

版权

本文详细介绍了前端开发中常见的数据录入组件，包括AutoComplete自动完成、Checkbox多选框、Cascader级联选择、DatePicker日期选择框、InputNumber数字输入框、Input输入框、Mentions提及、Rate评分、Radio单选框、Switch开关以及Slider滑动输入条。这些组件在不同场景下有不同的应用，如AutoComplete适用于输入提示，DatePicker用于日期选择，Cascader适合级联选择，而Switch则作为简单的开关状态切换。文章还详细讲解了各组件的属性、事件和使用注意事项。

摘要由CSDN通过智能技术生成

一、数据录入

1、AutoComplete自动完成

输入框自动完成功能，即输入框输入一些字符，然后下面显示出这个字符相关的，匹配的选项。

何时使用：需要自动完成时。还么看

2、Checkbox多选框

多选框。

何时使用：<1>在一组可选项中进行多项选择时；<2>单独使用可以表示两种状态之间的切换，和 switch 类似。区别在于切换 switch 会直接触发状态改变，而 checkbox 一般用于状态标记，需要和提交操作配合。<3>table里面直接就可以附带多选框

(0)<Checkbox>组件对应的事件

<1>onChange事件：表示变化时回调函数.可选值：无；默认值： -；类型： Function(e:Event)

e.target.checked: 值为boolean，表示当前的多选框是否被选中。true为当前被选中

(-1)<Checkbox>的子组件<Checkbox.Group>组件对应的事件

<1>onChange事件：表示变化时回调函数.可选值：无；默认值： -；类型： Function(checkedValueList)

checkedValueList: 选中的checkbox的value值的数组

(1)<Checkbox>组件对应属性: 一般情况下，不单独使用checkbox组件，而是用下面那个Checkbox.Group组件，然后在里面包裹checkbox组件

<1>autoFocus: 表示自动获取焦点.可选值：无；默认值： false；类型：boolean。

<2>checked: 表示指定当前是否选中.可选值：无；默认值： false；类型：boolean。

<3>defaultChecked: 表示初始是否选中.可选值：无；默认值： false；类型：boolean。

<4>disabled: 表示失效状态.可选值：无；默认值： false；类型：boolean。

<5>indeterminate: 表示当前checkbox的样式是否为框中间一个点(用于做全选的时候的那个框，下面的所有checkbox不是全选但是有选中的时候，就用这个样式)。默认checkbox样式只有勾和空白，两种.可选值：无；默认值： false；类型：boolean。

<6>value: 表示当前checkbox的key值。只有当前Checkbox组件放在Checkbox.Group组件中的时候，Checkbox组件上才会有这个属性.可选值：无；默认值： -；类型：string。

(2)<Checkbox>的子组件<Checkbox.Group>组件对应属性: 这个组件就是把一系列的checkbox包含起来的。如果使用options进行配置，里面里面就不能再包含Checkbox组件。如果里面包含Checkbox组件，就不能用options

<1>defaultValue: 表示默认选中的选项.可选值：无；默认值： []；类型： string[]。

<2>disabled: 表示整组失效.可选值：无；默认值： false；类型：boolean。

<3>name: 表示CheckboxGroup 下所有 input[type=“checkbox”] 的 name 属性.可选值：无；默认值： -；类型：string。

<4>options: 表示Checkbox.Group中的配置数据。数组中的每一项都表示一个checkbox组件。一般不用这个，不好用.可选值：无；默认值： []；类型： string[] | Option[]。

数据格式为：const options = [{ label: 'Apple', value: 'Apple' },{ label: 'Pear', value: 'Pear' },{ label: 'Orange', value: 'Orange' },]

<5>value: 表示指定选中的checkbox的value值的数组.可选值：无；默认值： []；类型： string[]。

import React, { PureComponent } from 'react';
import { Checkbox } from 'antd';
class demo extends PureComponent {
  render() {
    function onChange2(checkedValues) {console.log('checked = ', checkedValues);}
    function onChange(e) {console.log(`checked = ${e.target.checked}`);}
    return (<div><Checkbox defaultChecked={false} disabled /><br />
    <Checkbox defaultChecked onChange={onChange}>dsadasdsa</Checkbox>
    
    <Checkbox.Group style={
  { width: '100%' }} onChange={onChange2}>
        <Row>
          <Col span={8}><Checkbox value="A">A</Checkbox></Col>
          <Col span={8}><Checkbox value="B">B</Checkbox></Col>
          <Col span={8}><Checkbox value="C">C</Checkbox></Col>
          <Col span={8}><Checkbox value="D">D</Checkbox></Col>
        </Row>
    </Checkbox.Group>
    </div>);
  }
};
export default demo;

3、Cascader级联选择

级联选择框,这个是在select选择框的基础上增加了一些功能，即select选择框下面就只有一种数据了，而这个在里面还可以有分级的数据；便于在Cascader级联选择里面直接选择省市区这种。

何时使用：<1>需要从一组相关联的数据集合进行选择，例如省市区，公司层级，事物分类等。<2>从一个较大的数据集合中进行选择时，用多级分类进行分隔，方便选择。<3>比起 Select 组件，可以在同一个浮层中完成选择，有较好的体验。

(0)<Cascader>组件对应的事件

<1>onChange事件：表示选择完成后的回调，即只有最后选择成功了，弹出框隐藏了之后才触发。单独选择一个层级如果他还有子层级没有选择的话，是不会触发的(除非设置了changeOnSelect).可选值：无；默认值： -；类型： (value, selectedOptions) => void

value: 当前选择的所有层级的value值(不是label值)一个数组。如["zhejiang", "hangzhou"],表示选择的第一个层级的value为zhejiang,接着选择了它的子层级的value为hangzhou

selectedOptions: 表示当前选则的所有层级的option对象的一个数组。如[{value: "zhejiang", label: "Zhejiang222", children: Array(1)}, {value: "hangzhou", label: "Hangzhou2"}],这个就是上面选择的那个

<2>onPopupVisibleChange事件：表示显示/隐藏浮层的回调.可选值：无；默认值： -；类型： (value) => void

(1)<Cascader>组件对应属性: 默认情况<Cascader>组件的样式为一个input框，选中的值就会显示在input框里面。但是可以在<Cascader>组件里面加上其它的东西(它的样式就不为input框了，选中的结果也不会出现在原来的位置了)，然后用onchange属性把选中的值改变到其它地方去。如<Cascader><a href="#">Change city</a></Cascader>,这个就不为input样式了，选中里面层级，也不会改变里面的字符串了

<1>allowClear: 表示是否支持清除.可选值：无；默认值： true；类型：boolean。

<2>autoFocus: 表示自动获取焦点.可选值：无；默认值： false；类型：boolean。

<3>changeOnSelect: 表示当此项为 true 时，可以只选择父层级。然后onchange事件就会触发。默认是必须父层级里面的所有子级全部选中才会触发onchange事件.可选值：无；默认值： false；类型：boolean。

<4>className: 表示自定义类名.可选值：无；默认值： -；类型：string。

<5>defaultValue: 表示cascader的默认选中项数组.可选值：无；默认值： []；类型： string[]。

<6>disabled: 表示禁用，这个值需要用在option对象里面.可选值：无；默认值： false；类型：boolean。

<7>displayRender: 表示用这个函数来渲染，选择所有的层级之后，返回展示在页面的是什么东西.可选值：无；默认值： label => label.join(’ / ')；类型：(label, selectedOptions) => ReactNode。

label：即选中的所有层级的label值的一个数组，和onchange事件的value类似。如["Zhejiang222", "Hangzhou2"]

selectedOptions：和onchange事件的selectedOptions是一样的

<8>expandTrigger: 表示次级菜单的展开方式，可选 ‘click’ 和 ‘hover’.可选值：无；默认值： ‘click’；类型：string。

<9>fieldNames: 表示自定义 options 中 label name children 的字段（注意，3.7.0 之前的版本为 filedNames）.可选值：无；默认值： { label: ‘label’, value: ‘value’, children: ‘children’ }；类型：object。

<10>getPopupContainer: 表示菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位.可选值：无；默认值： () => document.body ；类型：Function(triggerNode)。

<11>loadData: 表示用于动态加载选项，需要配合options里面的isLeaf一起使用(即点击父层级，然后在这个函数里面发送请求获取子层级的数据再拼接起来)，无法与 showSearch 一起使用.可选值：无；默认值： -；类型：(selectedOptions: Array) => void。

selectedOptions: 当前父层级的所有options数据,类型为数组，数组的项依次为当前选择项的所有单个option。由于这selectedOptions和下面那个options的值是指向同一个地址，所以直接改变了这个值，就相当于改变了options上面的值，然后在setState就可以改变总共的值了。示例如下：

<12>notFoundContent: 表示当下拉列表为空时显示的内容.可选值：无；默认值： ‘Not Found’；类型：string。

<13>options: 表示cascader组件的数据源。这里面的字段名称是在fieldNames属性中定义的.可选值：无；默认值： -；类型： Option[]。

option[]数组的每一项为一个option对象，这个option对象就表示这一层级的数据。option[]数组的直接子项表示显示在页面上的，第一个层级

option对象的value属性：表示这一层级代码里面可以读取到的值

option对象的label属性：表示这一层级显示在页面的值

option对象的isLeaf属性：配合上面的loadData一起使用，当这个值为false的时候，才能触发上面的loadData。类型：boolean。默认为true

option对象的loading属性：配合上面的loadData一起使用，当这个值为true的时候，才能触发上面的显示一个转圈圈样式。类型：boolean。

option对象的children属性：表示这一层级的子option对象数组。这个即开始嵌套了，里面的数据就是点击这一层的label之后，打开的数据

如：const options = [{value: 'zhejiang',label: 'Zhejiang222',children: [{value: 'hangzhou',label: 'Hangzhou2',},],},{value: 'jiangsu',label: 'Jiangsu2222',},];

上面这个数据，则点开的第一层显示两项：Zhejiang222和Jiangsu2222；然后点击第一项Zhejiang222，显示出它的子级Hangzhou2；Jiangsu2222项没有子级

<14>placeholder: 表示输入框占位文本.可选值：无；默认值： ‘请选择’；类型：string。

<15>popupClassName: 表示自定义浮层类名.可选值：无；默认值： -；类型：string。

<16>popupPlacement: 表示浮层预设位置：bottomLeft bottomRight topLeft topRight.可选值：无；默认值： bottomLeft；类型：Enum。

<17>popupVisible: 表示控制浮层显隐.可选值：无；默认值： -；类型：boolean。

<18>showSearch: 表示为true即可以在input框中输入字符进行搜索(默认只能点击选则)，符合条件的项会出现在下面.可选值：无；默认值： false；类型：boolean or object。

<19>size: 表示输入框大小，可选 large default small.可选值：无；默认值： default；类型：string。

<20>style: 表示自定义样式.可选值：无；默认值： -；类型：string。

<21>suffixIcon: 表示自定义的选择框后缀图标.可选值：无；默认值： -；类型： ReactNode。

<22>value: 表示当前的层级选中项数组.可选值：无；默认值： -；类型： string[]。

这个数组其实和onchange事件接收的value值数组一样的。数组的每一项代表一个value值。

数组后面的项必须是前面一项的children里面的value，不然无效。如['zhejiang','hangzhou']默认显示值就为label值Zhejiang222/Hangzhou2。['zhejiang','jiangsu']jiangsu和zhejiang同级，则默认显示值就为label值zhejiang222

也可以只显示一项，如['zhejiang']默认显示值就为label值Zhejiang222，是直接默认选中这一个层级了，而不包括它的子级

(2)<Cascader>的showSearch属性值为对象的时候对应属性: 下面为showSearch值为对象时候里面的属性

<1>filter: 表示接收 inputValue path 两个参数，当 path 符合筛选条件时，应返回 true，反之则返回 false.可选值：无；默认值： -；类型：function(inputValue, path): boolean。

<2>limit: 表示搜索结果展示数量.可选值：无；默认值： 50；类型：number | false。

<3>matchInputWidth: 表示搜索结果列表是否与输入框同宽.可选值：无；默认值： -；类型： boolean。

<4>render: 表示用于渲染 filter 后的选项.可选值：无；默认值： -；类型：function(inputValue, path): ReactNode。

<5>sort: 表示用于排序 filter 后的选项.可选值：无；默认值： -；类型：function(a, b, inputValue)。

import React, { PureComponent } from 'react';
import { Cascader } from 'antd';
class demo extends PureComponent {
  state = {
    text: 'Unselect',
    initDlrList: [{
              value: 1,
              label: 1,
              isLeaf: false,
            }],
  };
  
    loadChildDlrData = options => {
    const targetOption = options[options.length - 1];
    targetOption.loading = true; // 这里是直接往 targetOption 上面修改值，就相当于是修改 options 数据里面的值了
    const { value } = targetOption;
    dispatch({
      type: 'daAdvertisement/getChildDlrInfo',
      payload: {value,},
      callback: res => {
        if (+res.code === 0) {
          targetOption.loading = false;
          targetOption.children = res.result.map(item => { // 这里是直接往 targetOption 上面修改值，就相当于是修改 options 数据里面的值了
            const { id, dlrShortName, } = item;
            return {
              value: id,
              label: dlrShortName,
              isLeaf: false,
            };
          });
          setInitDlrList(initDlrList); // 这里由于 initDlrList 相当于已经被修改，所以就直接 set 就好了
          return;
        }
      },
    });
  }
  
  onChange = (value, selectedOptions) => {this.setState({text: selectedOptions.map(o => o.label).join(', '),});};
  render() {
    const options = [{value: 'zhejiang',label: 'Zhejiang222',children: [{value: 'hangzhou',label: 'Hangzhou2',},],},
      {value: 'jiangsu',label: 'Jiangsu2222',disabled: true,},];
    function displayRender(label, selectedOptions) {return label[label.length - 1];}
    
    return (<div>
    <Cascader displayRender={displayRender} defaultValue={['zhejiang','hangzhou']} options={options} placeholder="Please select" showSearch/>
      {this.state.text}&nbsp;
      <Cascader options={options} onChange={this.onChange} expandTrigger="hover" changeOnSelect showSearch><a href=