1# 创建一个自定义样式的input UI组件

模仿那些vue react的UI框架，创建一个自定义样式的input UI组件

DxInput.jsx

// DxInput.jsx

import React, {Component} from "react";
import "./input.less";
import { isNotNull } from './DxTool'

class DxInput extends Component {
    constructor(props) {
        super(props);
        console.log('constructor', props)
        //this.state = {
        //  val: this.props.value
        //}
        this.handleInputChange = this.handleInputChangeFn.bind(this)
    }

    handleInputChangeFn (event) {
      this.props.onChange(event)
    }

    componentWillMount() {
    }

    //componentWillReceiveProps (nextProps) {
    //  console.log('component Will Receive Props', nextProps)
    //  if (this.state.val !== nextProps['value']) {
    //    this.setState({
    //      val: nextProps.value
    //    });
    //  }
    //}

    componentDidMount() {
      // console.log(this.props, isNotNull)
    }

    componentWillUnmount () {
    }

    render() {
        return (
          <div className="dx-input"
               style={this.props.style}>
            {
              isNotNull(this.props.before) &&
              <div className="dx-input-before">
                {this.props.before}
              </div>
            }
            <input type="text"
                   maxLength={this.props.maxLength - 0 > 0 ? this.props.maxLength : ''}
                   readOnly={this.props.readOnly ? true : false}
                   disabled={this.props.disabled ? true : false}
                   onChange={typeof(this.props.onChange)==='function' ? this.handleInputChange : null}
                   value={this.props.value}/>
            {
              isNotNull(this.props.after) &&
              <div className="dx-input-after">
                {this.props.after}
              </div>
            }
          </div>
        );
    }
}

export default DxInput;

DxInput.less

@inputHeight: 32px;

.dx-input {
  display: flex;border: 1px solid #000;
  .dx-input-after, & > input, .dx-input-before {
    display: inline-block; height: @inputHeight; line-height: @inputHeight;
  }
  .dx-input-before {
    padding-right: 5px;
  }
  & > input {
    display: inline-block; width: 100%; flex: 1;
    border: none; box-sizing: border-box; padding: 0 8px; overflow: hidden;
    background-color: transparent;
  }
  .dx-input-after {
    padding: 0 5px;
  }
}

DxTool.js

export function isNotNull (val) {
  return !(val === '' || val === undefined || val === null)
}

page.jsx 使用DxInput

......
constructor(props) {
        super(props);
        this.state = {
            display: 'none',
            clicked: false,
            demoVal1: 'site11111',
            demoVal2: 'site22222'
        }
        this.demoChangeClick = this.demoChange.bind(this)
    }
......
handleDemoChange1 (e) {
        // console.log(e.target.value)
        this.setState({
            demoVal1: e.target.value
        })
    }
render() {
        return (
                <div className="demo">
                    <div onClick={this.demoChangeClick}>{this.state.demoVal1}</div>
                    <div style={{width: '300px'}}>
                        <DxInput style={{background: '#f00'}}
                                 name="userName1"
                                 before="http://" after=".com.cn"
                                 onChange={this.handleDemoChange1.bind(this)}
                                 value={this.state.demoVal1} ></DxInput>
                    </div>
                    <div>{this.state.demoVal2}</div>
                    <div style={{width: '300px'}}>
                        <DxInput name="userName2"
                                 before={selectBeforeDemo}
                                 value={this.state.demoVal2} ></DxInput>
                    </div>
                </div>
          )
......