react写一个select组件的实现代码
程序员文章站
2023-02-07 11:14:49
之前一直用的antd的select组件,但在有些端并不适用,而原生的select样式修改不灵活,遂产生自己写一个组件的想法。观察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'} style={{ width: '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 iprops { disabled?: boolean; onchange?: (value) => void; value?: string | number; style?: react.cssproperties; classname?: string; } @observer export class mobileselect extends react.component<iprops> { @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<iprops>, 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 ( <div classname={'mobile-select ' + this.props.classname} style={this.props.style} ref={(node) => this.cell = node} > <div classname={'select-wrap'} onclick={() => { // 禁用不能弹出下拉框 if (!this.props.disabled) { this.showoption = !this.showoption; } }} > <icon type='down' style={this.showoption ? {transform: 'rotate(180deg)'} : {transform: 'rotate(0deg)'}} classname={'select-icon'}/> {this.text} </div> <div classname={'option-wrap'} style={this.showoption ? {position: 'absolute'} : {display: 'none'}}> { 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 ( <div onclick={() => { // 为了在父组件给子组件添加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}</div> ); }) } </div> </div> ); } } interface optionprops { value?: string | number; classname?: string; style?: react.cssproperties; } export class mobileoption extends react.component<optionprops> { render(): react.reactnode { const {children} = this.props; return ( <div style={this.props.style}> {children} </div> ); } }
下面是组件的样式
.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 ( <div> <button onclick={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"));
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: jQuery分组选择器简单用法示例
下一篇: 全面了解JavaScript的作用域链