新网创想网站建设,新征程启航

为企业提供网站建设、域名注册、服务器等服务

使用react怎么写一个select组件

这篇文章给大家介绍使用react怎么写一个select组件,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。

创新互联公司是一家集网站建设,阳明企业网站建设,阳明品牌网站建设,网站定制,阳明网站建设报价,网络营销,网络优化,阳明网站推广为一体的创新建站企业,帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿,时刻以成就客户成长自我,坚持不断学习、思考、沉淀、净化自己,让我们为更多的企业打造出实用型网站。

之前一直用的antd的Select组件,但在有些端并不适用,而原生的select样式修改不灵活,遂产生自己写一个组件的想法。观察select组件:

 {this.value=value}}
  man
  woman

可以看出数据都是在option中,有值value和显示出来的数据一一对应。如果我们写一个select组件,那么应该有onChange方法,应该要访问到子元素,而且div是没有value这个属性的,所以option应该也是一个组件,有value属性。下面是我写的组件的用法:

import {MobileSelect, MobileOption} from '../../components/MobileSelect';

  this.changeDataValue('clarity', v)}
 >
  {
   (clarity || []).map((item, i) => {
    return (
     {item.title}
    );
   })
  }
 

可以看出其和一般的select组件用法差不多。效果如下:

使用react怎么写一个select组件

下面是组件

import {observable} from 'mobx';
import {observer} from 'mobx-react';
import React from 'react';
import {Icon} from 'antd';
import './index.less';

interface IProps {
 disabled?: boolean;
 onChange?: (value) => void;
 value?: string | number;
 style?: React.CSSProperties;
 className?: string;
}
@observer
export class MobileSelect extends React.Component {
 @observable showOption = false;   // 是否弹出下拉框
 @observable value: any = '';    // 当前选中的value值
 @observable text: any = '';     // 选中的value值对应的文本
 @observable cell: any;       // 组件的dom节点
 componentDidMount(): void {
  // 获取选择框的ref,当在组件外点击时的时候收起下拉框
  document.addEventListener('click', (e) => {
   if (this.cell && this.cell !== e.target && !this.cell.contains(e.target)) {
    this.showOption = false;
   }
  }, true);
 }
 componentWillReceiveProps(nextProps: Readonly, nextContext: any): void {
  // 根据传入的value值,遍历children,找到对应值的展示文本
  if (nextProps.value !== this.props.value || nextProps.children !== this.props.children) {
   React.Children.map(this.props.children, (child, index) => {
    if (nextProps.value === child.props.value) {
     this.text = child.props.children;
    }
   });
  }
 }
 render(): React.ReactNode {
  const {children, value} = this.props;
  console.log(value);
  return (
   
 this.cell = node}    >     
 {       // 禁用不能弹出下拉框       if (!this.props.disabled) {        this.showOption = !this.showOption;       }      }}     >            {this.text}     
          {       React.Children.map(children, (child, index) => {        // 设置选中option和未选中option的样式        let optionClassName = '';        if (this.props.value === child.props.value) {         optionClassName = child.props.className ? child.props.className + ' option-item selected' : 'option-item selected';        } else {         optionClassName = child.props.className + ' option-item';        }        return (         
 {     // 为了在父组件给子组件添加onClick事件,包裹了一层div           // 有无onChange事件都能改变值           if (this.props.value && this.props.onChange) {            this.props.onChange(child.props.value);           } else {            this.text = child.props.children;            this.value = child.props.value;           }           console.log(this.value);           this.showOption = !this.showOption;          }}          style={this.props.style}          className={optionClassName}         >{child}
       );       })      }     
   
  );  } } interface OptionProps {  value?: string | number;  className?: string;  style?: React.CSSProperties; } export class MobileOption extends React.Component {  render(): React.ReactNode {   const {children} = this.props;   return (         {children}    
  );  } }

下面是组件的样式

.Mobile-Select {
 display: inline-block;
 min-width: 100px;
 margin: 0 6px;
 .select-wrap {
  border: 1px solid #e0c0a2;
  border-radius: 4px;
  padding: 5px 11px;
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  align-items: center;
  .select-icon {
   transition: .3s;
   float: right;
  }
 }
 .option-wrap {
  box-shadow: 0 0 5px #333;
  z-index: 1000;
  border-radius: 5px;
  .option-item {
   background-color: #fff;
   padding: 2px 11px;
   min-width: 100px;
   &.selected {
    background-color: #fbe6d0;
   }
  }
 }
}

总的来说只实现了select的基本功能。有改进的地方请指点一二。

PS:React Select默认值选中问题

import React from "react";
import { render } from "react-dom";

class App extends React.Component {
 constructor(props) {
  super(props);
  this.state = {
   projects: [],
   value: ""
  };
 }
 componentDidMount() {
  // 模拟ajax调用,成功之后把需要改变的默认值赋值给this.state.value
  setTimeout(() => {
   this.setState({
    projects: [
     { id: 1, name: "花生" },
     { id: 2, name: "苹果" },
     { id: 3, name: "杨桃" }
    ],
    value: 1
   });
  }, 3000);
 }
 handleClick() {
  this.setState({
   projects: [
    { id: 4, name: "水果" },
    { id: 5, name: "西瓜" },
    { id: 6, name: "哈哈哈" }
   ],
   value: 4
  });
 }
 handleChange = e => {
  this.setState({
   value: e.target.value
  });
 };
 render() {
  let projects = this.state.projects;
  return (
   
    异步拉取数据     {/* 这里不用再去判断project的长度是否大于0,在ajax里面做判断就行,如果小于零或者不存在它就是默认值 */}         
  );  } } render(, document.getElementById("root"));

关于使用react怎么写一个select组件就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。


网站名称:使用react怎么写一个select组件
本文路径:http://wjwzjz.com/article/ppijhe.html

其他资讯

在线咨询
服务热线
服务热线:028-86922220
TOP