mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-03 04:30:06 +08:00
71594b0e5c
Use ES7 style class members for event handlers so that 'this' is automatically bound and each definition site doesn't need to manually invoke 'bind'. This makes all existing ES2015 class usages in components use the same mechanism for binding.
45 lines
1.0 KiB
JavaScript
45 lines
1.0 KiB
JavaScript
import React, { PropTypes } from 'react';
|
|
import Icon from '../icon';
|
|
function noop() {
|
|
}
|
|
|
|
export default class Search extends React.Component {
|
|
handleChange = (e) => {
|
|
this.props.onChange(e);
|
|
}
|
|
|
|
handleClear = (e) => {
|
|
e.preventDefault();
|
|
this.props.handleClear(e);
|
|
}
|
|
|
|
render() {
|
|
const { placeholder, value, prefixCls } = this.props;
|
|
return (
|
|
<div>
|
|
<input placeholder={placeholder} className={ `${prefixCls} ant-input` } value={ value } ref="input"
|
|
onChange={this.handleChange} />
|
|
{ value && value.length > 0 ?
|
|
<a href="#" className={ `${prefixCls}-action` } onClick={this.handleClear}>
|
|
<Icon type="cross-circle" />
|
|
</a>
|
|
: <span className={ `${prefixCls}-action` }><Icon type="search" /></span>
|
|
}
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
Search.defaultProps = {
|
|
placeholder: '',
|
|
onChange: noop,
|
|
handleClear: noop,
|
|
};
|
|
|
|
Search.propTypes = {
|
|
prefixCls: PropTypes.string,
|
|
placeholder: PropTypes.string,
|
|
onChange: PropTypes.func,
|
|
handleClear: PropTypes.func,
|
|
};
|