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

B 端物料组件库

---
title: NumberPicker-Simple
order: 1
---

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

import { Button } from '@alifd/next';

class App extends Component {
  state = {
    value: 1,
    isPreview: false,
  }
  render() {
    return (
      <div>
        <NumberPicker isPreview={this.state.isPreview} beforeLabel="1元 =" unitLabel="积分" value={this.state.value} onChange={(num) => {this.setState({value: num})}} />
        <p>当前输入的值：{this.state.value}</p>
        <p><Button onClick={() => {
          this.setState({
            isPreview: !this.state.isPreview,
          })
        }}>切换阅读态</Button></p>
      </div>
    );
  }
}

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