kara-react-components-mobileweb/src/components/input/index.js

kara项目移动端react组件库

import React, { Component } from 'react'
import { string, func, oneOf } from 'prop-types'
import classNames from 'classnames'
import Icon from '../icon/index'

class Input extends Component {
  static propTypes = {
    prefixCls: string,
    className: string,
    onChange: func, // onchange事件 会传递给func 一个value
    placeholder: string, // placeholder
    type: oneOf(['text', 'search']),
    defaultValue: string,
  }

  static defaultProps = {
    prefixCls: 'kara-input',
    className: '',
    onChange: () => {},
    placeholder: '请输入内容',
    type: 'text',
    defaultValue: '',
  }

  state = {
    value: '',
  }

  componentWillMount() {
    if (this.props.defaultValue && this.props.defaultValue !== '') {
      this.setState({ value: this.props.defaultValue })
    }
  }

  handelChange = (e) => {
    this.setState({ value: e.value })
    this.props.onChange(e.value)
  }

  clearValue = () => {
    this.input.value = ''
    this.handelChange(this.input)
  }

  render() {
    const { prefixCls, className, placeholder, type } = this.props
    const { value } = this.state
    const classnames = classNames(prefixCls, {
      [`${prefixCls}-search-input`]: type === 'search',
    }, className)

    return (<div className={`${prefixCls}-container`}>
      {
        this.state.value !== '' && <Icon type="close" className={`${prefixCls}-clear`} onClick={() => this.clearValue()} />
      }
      {
        type === 'search' && <Icon type="search" className={`${prefixCls}-search`} />
      }
      <input
        type="text"
        className={classnames}
        onChange={e => this.handelChange(e.target)}
        value={value}
        placeholder={placeholder}
        ref={(e) => { this.input = e }}
      />
    </div>)
  }
}

export default Input