@xme-react/input

输入框 / Input

Input使用方式

参数	类型	备注
type	String	同原生的input的type，默认为text
defaultValue	String	默认输入框显示的值
value	String	输入框的值
prefix	String	ReactNode
suffix	String	ReactNode
cls	String	自定义输入框的样式名
affixCls	String	当存在prefix或者suffix时，可以自定义input父元素的样式名
onChange	Function	输入框内容变更的回调
onPressEnter	Function	输入框中按下回车的回调
onKeyDown	Function	输入框中按下按键的回调
disabled	Boolean	不可用状态
其他		其他原生input有的属性或方法

Input.Search使用方式

参数	类型	备注
enterButton	Boolean	String
onSearch	Function	点击搜索按钮/图标的回调

// index.scss

@font-face {font-family: "test";
	src: url('//at.alicdn.com/t/font_503250_aco29ccjum2yy14i.eot?t=1512792123102'); /* IE9*/
	src: url('//at.alicdn.com/t/font_503250_aco29ccjum2yy14i.eot?t=1512792123102#iefix') format('embedded-opentype'), /* IE6-IE8 */
	url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAXQAAsAAAAACHgAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADMAAABCsP6z7U9TLzIAAAE8AAAARAAAAFZW/kfvY21hcAAAAYAAAABjAAABnM65aZlnbHlmAAAB5AAAAecAAAI43wdW12hlYWQAAAPMAAAALwAAADYPwkX7aGhlYQAAA/wAAAAcAAAAJAfeA4VobXR4AAAEGAAAABAAAAAQD+kAAGxvY2EAAAQoAAAACgAAAAoBkgDYbWF4cAAABDQAAAAfAAAAIAETAF1uYW1lAAAEVAAAAUUAAAJtPlT+fXBvc3QAAAWcAAAAMwAAAEQ8Lh7WeJxjYGRgYOBikGPQYWB0cfMJYeBgYGGAAJAMY05meiJQDMoDyrGAaQ4gZoOIAgCKIwNPAHicY2Bk/sU4gYGVgYOpk+kMAwNDP4RmfM1gxMjBwMDEwMrMgBUEpLmmMDgwVDxjZm7438AQw9zAMAEozAiSAwAkywyBeJzFkMENgCAMRV+pGmIcxaNxIE+OwMSsgW3lwgR88mj701BSYAXUOI0F5EVwPeZK+Moe/sJtdbaTLJZK1daGzCXRkSNL/rJsTJPMGz3qiPvqle+7dOyLlR/fa9Uf9AP4Bg9/AHicZZE9b9NQFIbvOddfiROH+OM6ceokdkjcqtTIjpMMEclAF1BbVerEhFiaiaRdqEBUKgMSSAxI1BJji5AQv4HOzW/oBAh+ATuB66hMXB09OufeZzivLhEJ+fOdXtAKMcgqicgm2SUEpHXwNXTBC5IQ18HyRMs2NRq0Ak9u+SG9A7YvmSzuJx1bkqUSaFCHrhf3gxAD6CUjHELMXIBqzdnT2ys6fQv5SlB/ubiPH8BqtFZKo43FvVtjM24aylFB16u6/kaRRFFBFEoaPLZZTszlpcVHseRYF401bEChGjhbD4rNmv7oVTJ123YO4OQEjFpT+zQuO2Vezx1m6FX5RlGpOMXWTROOfqoVo+B2fhB+KM96QF/gFamRgIx5Tg1kk9mc3TrE/UG3N4IB63KEQEMIeFMH/gxJxKeowzPbUR1cuNaRzk5xGE+OEZB5DIC+f1LUZu8oPZ1u7yPub29lhAiGieoxdXXj2sMrmh7enbXDL0/LllWmzz5rlKYHh+liEyc7OxNccnEMu697KvMLa9MRzURCcBnkIX4jKv+vZQK+4nJjQ/Jvgyz5nWQMQSfpxw0Y9GNmlsBmJpJ0Tuk8TS8F4dIV8sLZmaDK9PycymrW55WM+PWfkqbz37+E7E753yXkL5XsZNAAeJxjYGRgYADilak3dOL5bb4ycLMwgMC1wEZrBP2/gIWBWQLI5WBgAokCABZfCSEAeJxjYGRgYG7438AQw8IAAkCSkQEVsAAARwoCbQQAAAAD6QAABAAAAAQAAAAAAAAAAHYA2AEcAAB4nGNgZGBgYGEIZGBlAAEmIOYCQgaG/2A+AwAREgFxAHicZY9NTsMwEIVf+gekEqqoYIfkBWIBKP0Rq25YVGr3XXTfpk6bKokjx63UA3AejsAJOALcgDvwSCebNpbH37x5Y08A3OAHHo7fLfeRPVwyO3INF7gXrlN/EG6QX4SbaONVuEX9TdjHM6bCbXRheYPXuGL2hHdhDx18CNdwjU/hOvUv4Qb5W7iJO/wKt9Dx6sI+5l5XuI1HL/bHVi+cXqnlQcWhySKTOb+CmV7vkoWt0uqca1vEJlODoF9JU51pW91T7NdD5yIVWZOqCas6SYzKrdnq0AUb5/JRrxeJHoQm5Vhj/rbGAo5xBYUlDowxQhhkiMro6DtVZvSvsUPCXntWPc3ndFsU1P9zhQEC9M9cU7qy0nk6T4E9XxtSdXQrbsuelDSRXs1JErJCXta2VELqATZlV44RelzRiT8oZ0j/AAlabsgAAAB4nGNgYoAALgbsgIWRiZGZkYWRlYGxgqs8NTMpMzG/JNOQMzknvzg1LTMnh4EBAHJMCFoA') format('woff'),
	url('//at.alicdn.com/t/font_503250_aco29ccjum2yy14i.ttf?t=1512792123102') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
	url('//at.alicdn.com/t/font_503250_aco29ccjum2yy14i.svg?t=1512792123102#iconfont') format('svg'); /* iOS 4.1- */
}

.iconfont {
	font-family:"test" !important;
	font-size:16px;
	font-style:normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.icon-user:before { content: "\e600"; }

.icon-close {
	color: gray;
	font-size: 18px;
	cursor: pointer;
}
.icon-close:before { content: "\e603"; }


.search_icon {
	padding-right: 40px!important;
}

.search_btn {
	padding-right: 45px!important;
}

import React, {Component} from 'react'
import ReactDOM from 'react-dom'
import ClassNames from 'classnames'
import Input from '@xm/Input'
import styles from './index.scss'

const style = {
  marginBottom: '20px'
}

class App extends Component {
  constructor (props) {
    super(props)

    this.state = {
      inputValue: ''
    }

    this.onChange = this.onChange.bind(this)
    this.empty = this.empty.bind(this)
    this.ref = this.ref.bind(this)
  }

  onChange (e) {
    this.setState({
      inputValue: e.target.value
    })
  }
  
  onPressEnter (ev) {
    console.log(ev.target.value)
  }

  onSearch (val) {
    console.log(val)
  }

  empty () {
    this.input.focus()
    this.setState({
      inputValue: ''
    })
  }

  ref (x) {
    this.input = x
  }

  render () {
    const {inputValue} = this.state
    const prefix = <i className={ClassNames(styles.iconfont, styles['icon-user'])} />
    const suffix = inputValue ?
      <i className={ClassNames(styles.iconfont, styles['icon-close'])} onClick={this.empty} /> :
      null

    return (
      <div>
        <Input style={style} placeholder="default input" onPressEnter={this.onPressEnter} />
        <Input style={style} type="password" defaultValue="password" />
        <Input style={style} disabled defaultValue="disabled input" />
        <Input style={style} placeholder="default input with prefix"
               onChange={this.onChange} value={inputValue}
               suffix={suffix} prefix={prefix} ref={this.ref}
        />

        <Input.Search style={style} placeholder="search something" onSearch={this.onSearch} />
        <Input.Search style={style} cls={styles.search_icon} enterButton placeholder="search something" onSearch={this.onSearch} />
        <Input.Search style={style} cls={styles.search_btn} enterButton="搜索" placeholder="search something" onSearch={this.onSearch} />
      </div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('app'))