@aliretail/react-materials-components/demo/Input/example.md

B 端物料组件库

---
title: Input-Simple
order: 1
---

```jsx
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Input } from '@aliretail/react-materials-components';
import { Button } from '@alifd/next';

const { TextArea } = Input;

class App extends Component {
  state = {
    inputValue: '',
    textAreaValue: '',
  };
  handleChange = (value) => {
    console.log(`handleChange,value=${value}`);
    this.setState({
      inputValue: value,
    });
  };
  handleTextAreaChange = (value) => {
    console.log(`handleTextAreaChange,value=${value}`);
    this.setState({
      textAreaValue: value,
    });
  };
  render() {
    return (
      <div>
        <p>
          <span>Input非受控模式：</span>
          <Input maxLength={100} onChange={console.log} showLimitHint />
        </p>
        <p>
          <span>Input受控模式：</span>
          <Input
            maxLength={100}
            onChange={this.handleChange}
            value={this.state.inputValue}
            showLimitHint
            hasClear
          />
          <Button
            onClick={() => {
              this.setState({ inputValue: undefined });
            }}
          >
            清空
          </Button>
        </p>
        <p>
          <span>TextArea非受控模式：</span>
          <TextArea maxLength={100} onChange={console.log} showLimitHint />
        </p>
        <p>
          <span>TextArea受控模式：</span>
          <TextArea
            maxLength={100}
            onChange={this.handleTextAreaChange}
            value={this.state.textAreaValue}
            showLimitHint
          />
        </p>
      </div>
    );
  }
}

ReactDOM.render(<App />, mountNode);
```