Stepper 步进器

规则

• 当想要对数值进行小幅度调整时，可以使用 Stepper，eg：将年化收益从 4.00% 调整到 4.05%。

代码演示

基本

import { List, Stepper } from 'antd-mobile';
class Demo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      val: 3,
      val1: 2,
    };
  }
  onChange = (val) => {
    // console.log(val);
    this.setState({ val });
  }
  onChange1 = (val1) => {
    // console.log(val);
    this.setState({ val1 });
  }
  render() {
    return (
      <List renderHeader={() => 'Demos'}>
        <List.Item
          wrap
          extra={
            <Stepper
              style={{ width: '100%', minWidth: '2rem' }}
              showNumber
              max={10}
              min={1}
              value={this.state.val}
              onChange={this.onChange}
            />}
        >
        Show number value(Use TouchEvent for mobile by default)
        </List.Item>
        <List.Item
          wrap
          extra={
            <Stepper
              style={{ width: '100%', minWidth: '2rem' }}
              showNumber
              max={10}
              min={1}
              value={this.state.val1}
              onChange={this.onChange1}
              useTouch={false}
            />}
        >
        Show number value(Use MouseEvent for PC)
        </List.Item>
        <List.Item extra={
          <Stepper
            style={{ width: '100%', minWidth: '2rem' }}
            showNumber
            max={10}
            min={1}
            defaultValue={3}
            disabled
          />}
        >
        Disabled
        </List.Item>
      </List>
    );
  }
}
ReactDOM.render(<Demo />, mountNode);

API