全国服务热线:4008-888-888

行业新闻

小程序在哪儿打开_react写一个select组件的完成代

react写一个select组件的实现代码       这篇文章主要介绍了react写一个select组件的实现代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

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

 select onChange={(value) = {this.value=value}}
 option value='1' man /option 
 option value='0' woman /option 
 /select 

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

import {MobileSelect, MobileOption} from '../../components/MobileSelect';
 MobileSelect
 disabled={isDisabled}
 value={data.clarity || ringResponse.clarity || 'Flawless'}
 '132px' }}
 onChange={(v) = this.changeDataValue('clarity', v)}
 (clarity || []).map((item, i) = {
 return (
 MobileOption key={i + ''} value={item.code} {item.title} /MobileOption 
 /MobileSelect 

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

下面是组件

import {observable} from 'mobx';
import {observer} from 'mobx-react';
import React from 'react';
import {Icon} from 'antd';
import './index.less';
interface IPro凡科抠图 {
 disabled : boolean;
 onChange : (value) = void;
 value : string | number;
 style : React.CSSProperties;
 className : string;
@observer
export class MobileSelect extends React.Component IPro凡科抠图 {
 @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);
 componentWillReceivePro凡科抠图(nextPro凡科抠图: Readonly IPro凡科抠图 , nextContext: any): void {
 // 根据传入的value值,遍历children,找到对应值的展示文本
 if (nextPro凡科抠图.value !== this.pro凡科抠图.value || nextPro凡科抠图.children !== this.pro凡科抠图.children) {
 React.Children.map(this.pro凡科抠图.children, (child, index) = {
 if (nextPro凡科抠图.value === child.pro凡科抠图.value) {
 this.text = child.pro凡科抠图.children;
 render(): React.ReactNode {
 const {children, value} = this.pro凡科抠图;
 console.log(value);
 return (
 className={'Mobile-Select ' + this.pro凡科抠图.className}
 'select-wrap'}
 () = {
 // 禁用不能弹出下拉框
 if (!this.pro凡科抠图.disabled) {
 this.showOption = !this.showOption;
 Icon type='down' 'rotate(180deg)'} : {transform: 'rotate(0deg)'}} className={'select-icon'}/ 
 {this.text}
 /div 
 div className={'option-wrap'} 'absolute'} : {display: 'none'}} 
 React.Children.map(children, (child, index) = {
 // 设置选中option和未选中option的样式
 let optionClassName = '';
 if (this.pro凡科抠图.value === child.pro凡科抠图.value) {
 optionClassName = child.pro凡科抠图.className child.pro凡科抠图.className + ' option-item selected' : 'option-item selected';
 } else {
 optionClassName = child.pro凡科抠图.className + ' option-item';
 return (
 () = { // 为了在父组件给子组件添加onClick事件,包裹了一层div
 // 有无onChange事件都能改变值
 if (this.pro凡科抠图.value this.pro凡科抠图.onChange) {
 this.pro凡科抠图.onChange(child.pro凡科抠图.value);
 } else {
 this.text = child.pro凡科抠图.children;
 this.value = child.pro凡科抠图.value;
 console.log(this.value);
 this.showOption = !this.showOption;

下面是组件的样式

.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的基本功能。有改进的地方请指点一二。

凡科抠图:React Select默认值选中问题

import React from "react";
import { render } from "react-dom";
class App extends React.Component {
 constructor(pro凡科抠图) {
 super(pro凡科抠图);
 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 (
 div 
 button this.handleClick.bind(this)} 异步拉取数据 /button 
 {/* 这里不用再去判断project的长度是否大于0,在ajax里面做判断就行,如果小于零或者不存在它就是默认值 */}
 select
 defaultValue=""
 value={this.state.value}
 onChange={this.handleChange}
 {projects.length 0 
 projects.map((item, i) = {
 return (
 option key={i} value={item.id} 
 {item.name}
 /option 
 /select 
 /div 
render( App / , document.getElementById("root"));

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。




在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服