React 封装Input

ZoomQuiet 发布于2019-08-21 11:49 / 868人阅读

摘要：需要的第三方库等等两个页面中使用修改输入框样式组件引用大牛小伙子请输入大牛小伙子

需要的第三方库：react | prop-types | classnames | 等等
两个页面 Input.js | input.less
Input.js

import React,{Component} from "react";
import {PropTypes} from "prop-types";
import classNames from "classnames";
import "./input.less"

export default class Input extends Component {
  constructor(props){
    super(props);
    this.state = {
      value:props.value
    }
  }

  componentWillReceiveProps(props){
    if(props.value !== this.props.value){
      this.setState({value:props.value})
    }
  }
  handleChange(e){
    const { onChange,length } = this.props;
    let val = e.target.value
    if(val.length > length){
      e.target.value = val;
    }
    this.setState({value:val})
    onChange && onChange(e,val)
  }

  render(){
    const {prefixCls,style,className,children,type,length, ...other} = this.props;
    const cls = classNames(className,`${prefixCls}`,{"textarea":type ==="textarea"})
    if(type==="textarea") return (
            
    )

    return (
      
    )
  }
}

DaNiu.propTypes = {
  prefixCls:PropTypes.string,
  type:PropTypes.string,
}

DaNiu.defaultProps = {
  prefixCls:"d-input",
  type:"text",
}

input.less

.d-input{
  position: relative;
}
.d-input-inner{
  // iOS 中使用appearance修改输入框样式
  appearance: none;
  background-color: #fff;
  background-image: none;
  border-radius: 5px;
  border: 1px solid #E8E8E8;
  box-sizing: border-box;
  color: #1f2d3d;
  font-size: inherit;
  width: 100%;
  height: 30px;
  line-height: 14px;
  outline: 0;
  padding: 3px 10px;
  display: inline-block;
  transition: #0fa120 0.5 ease-in;
  &:hover{
    border:1px solid #aeaeae;
  }
  &:focus{
    border-color: #0fa120;
    box-shadow: 0 0 0 2px rgba(84,220,103,0.14);
  }
  &:focus&::placeholder{
    color:#d5d5d5;
  }
}

组件引用
Index.js

import React,{Component} from "react";
import "./index.less"

import Input from "./Input"


export default class Index extends Component{
  constructor(props){
    super(props);
    this.state={
      visible:false,
      loading:true,
      source:""
    }

  }
  
  onChange(e,value){
    console.log("e",value)
    value && value === "大牛小伙子" ? this.setState({source:value}) : this.setState({source:""})
  }



  render(){
    return(
      
         请输入：大牛小伙子

        

        {this.state.source}
      
    )
  }
}

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/87148.html

精读《怎么用 React Hooks 造轮子》

摘要：可以看到，这样不仅没有占用组件自己的，也不需要手写回调函数进行处理，这些处理都压缩成了一行。效果通过拿到周期才执行的回调函数。实现等价于的回调仅执行一次时，因此直接把回调函数抛出来即可。 1 引言上周的精读《React Hooks》已经实现了对 React Hooks 的基本认知，也许你也看了 React Hooks 基本实现剖析（就是数组），但理解实现原理就可以用好了吗？学的是...

Shihira 2019-08-26 13:22 评论0 收藏0
Reactjs vs. Vuejs

摘要：上图是二月份前端框架排名，位居第一，排名第三。我们认为前端模板和组件代码是紧密相连的。直到最近看了文档，才发现另有蹊跷。欢迎大家关注腾讯云技术社区-segmentfault官方主页，我们将持续在博客园为大家推荐技术精品文章哦~ 纪俊，从事Web前端开发工作，2016年加入腾讯OMG广告平台产品部，喜欢研究前端技术框架。这里要讨论的话题，不是前端框架哪家强，因为在 Vue 官网就已经...

AaronYuan 2019-08-20 16:24 评论0 收藏0
VUE防抖与节流的最佳解决方案——函数式组件

摘要：案例持续触发事件时，并不立即执行函数，当毫秒内没有触发事件时，才会延时触发一次函数。也以函数形式暴露普通插槽。这样的场景组件用函数式组件是非常方便的。相关阅读函数式组件自定义指令前言有echarts使用经验的同学可能遇到过这样的场景，在window.onresize事件回调里触发echartsBox.resize()方法来达到重绘的目的，resize事件是连续触发的这意味着echarts...

OldPanda 2019-05-22 19:08 评论0 收藏0
我是如何设计 Upload 上传组件的

摘要：组件设计的目标是解决用户上传文件的便利性，但是中后台组件的场景是多种多样的，所以可扩展能力是组件不可忽视的另一方面。我们可能的期望是在任何浏览器下交互和都一致的组件。由此我们做出了两个通用的组件文件选择器。 Upload 组件设计的目标是解决用户上传文件的便利性，但是中后台 Upload 组件的场景是多种多样的，所以可扩展能力是 Upload 组件不可忽视的另一方面。同样为了大家能够...

malakashi 2019-08-23 15:19 评论0 收藏0