# ClearableInput

输入框，可以清除已输入内容

## 案例演示

### ClearableInput 基本用法

---demo
```js
import { ClearableInput } from 'amos-framework';

function onChange(value){
  console.log(value);
}

function onPressEnter(evt){
  console.log('onPressEnter', evt.target.value);
}

ReactDOM.render((
  <div style={{ width: '40em' }}>
    <ClearableInput defaultValue="清除" onChange={onChange} />
    <br />
    <ClearableInput defaultValue="常驻清除" clearResident onChange={onChange} />
    <br />
    <ClearableInput defaultValue="自定义icon" clearIcon="cross-circle" onChange={onChange} />
    <br />
    <ClearableInput defaultValue="回车事件" onChange={onChange} onPressEnter={onPressEnter} />
    <br />
    <ClearableInput hasClear={false} defaultValue="无清除" onChange={onChange} />
    <br />
    <ClearableInput placeholder="禁用" disabled />
    <br />
    <ClearableInput placeholder="输入内容..." onChange={onChange} />
  </div>
), _react_runner_);
```
---demoend

### ClearableInput 测试非可控

> 内部使用 `getDerivedStateFromProps` 进行 props 转换，react 部分版本，state 更新也会导致 `getDerivedStateFromProps` 执行，此时会出现数据bug。

---demo
```js
import { ClearableInput } from 'amos-framework';

class Demo extends Component {
  constructor(props){
    super(props);
    this.state = {
      v: '1'
    };
  }

  render() {
    return <ClearableInput value={this.state.v} onChange={v => this.setState({ v })} />;
  }
}

ReactDOM.render((
  <div style={{ width: '40em' }}>
    <Demo />
  </div>
), _react_runner_);
```
---demoend

### ClearableInput 在 Form 中的使用

---demo
```js
import { Form, ClearableInput, Button, AmosAlert } from 'amos-framework';

const FormItem = Form.Item;

class Demo extends Component {
  constructor(props) {
    super(props);
    this.state = {
      form: {
        name: 'ilex_h'
      },
      rules: {
        name: [
          { required: true, message: '请输入名称' },
          { min: 5, message: '长度不够！' }
        ]
      }
    };
  }

  onChange = (key, value) => {
    const newForm = Object.assign({}, this.state.form, { [key]: value });
    this.setState({
      form: newForm
    });
  }

  handleSubmit = (e) => {
    e.preventDefault();
    this.form.validate((valid, dataValues, errors) => {
      console.log('返回内容:', dataValues, valid, errors);
      if (valid) {
        AmosAlert.success('结果', JSON.stringify(dataValues));
      } else {
        console.log('error submit!!');
        return false;
      }
    });
  }

  render() {
    const { form, rules } = this.state;
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 4 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 14 }
      }
    };
    const wrapperCol = {
      wrapperCol: {
        xs: { span: 24, offset: 0 },
        sm: { span: 14, offset: 4 }
      }
    };
    return (
      <Form style={{ width: 500, padding: '30px 0 0 0' }} className="basic-demo" ref={component => this.form = component} model={form} rules={rules}>
        <FormItem label="名称" tip="名称最小长度为5" field="name" {...formItemLayout} >
          <ClearableInput
            value={form.name}
            placeholder="请输入名称"
            onChange={(value) => this.onChange('name', value)}
          />
        </FormItem>
        <FormItem label="昵称" field="userName" {...formItemLayout} >
          <ClearableInput
            value={form.userName}
            placeholder="请输入昵称"
            onChange={(value) => this.onChange('userName', value)}
          />
        </FormItem>
        <FormItem {...wrapperCol}>
          <Button onClick={this.handleSubmit}>提交</Button>
        </FormItem>
      </Form>
    );
  }
}

ReactDOM.render(<Demo />, _react_runner_);
```
---demoend

## props

| params  | type | default | description |
| --- | --- | --- | --- |
| prefixCls | string | `amos-clearable-input` | css class 前缀 |
| className | string | - | css class |
| type | string | - | 类型 |
| readOnly | boolean | - | 只读 |
| maxLength | number | - | 最大长度 |
| clearIcon | string | `cross` | 清除icon |
| value | ReactText | - | 输入框的值 |
| defaultValue | ReactText | - | 初始化输入框的值, 不可控 |
| onChange | function | - | 输入改变后的回调，参数为 value 值 |
| onClear | function | - | 清空后的回调 |
| size | string: `sm、lg` | - | 输入框大小，除默认外可选值：sm、lg |
| disabled | boolean | - | 是否禁用 |
| placeholder | string | - | 同 input placeholder |

Input 的其他属性和 React 自带的 [input](https://facebook.github.io/react/docs/events.html#supported-events) 一致。

### methods

* focus() `同 HTMLInputElement.focus()`
* select() `同 HTMLInputElement.select()`