ant-mobile中使用rc-form

最新推荐文章于 2024-08-13 08:23:21 发布

前端007

最新推荐文章于 2024-08-13 08:23:21 发布

阅读量1.5k

点赞数

分类专栏： react-Antd 文章标签： ant-mobile使用

本文链接：https://blog.csdn.net/weixin_44003190/article/details/98607649

版权

react-Antd 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

表单过滤器

<InputItem
      {...getFieldProps('money2', {
              normalize: (v, prev) => {
                if (v && !/^(([1-9]\d*)|0)(\.\d{0,2}?)?$/.test(v)) {
                  if (v === '.') {
                    return '0.';
                  }
                  return prev;
                }
                return v;
              },
            })}
            type={type}
            placeholder="money format"
            ref={el => this.inputRef = el}
            onVirtualKeyboardConfirm={v => console.log('onVirtualKeyboardConfirm:', v)}
            clear
            moneyKeyboardWrapProps={moneyKeyboardWrapProps}
    >数字键盘</InputItem>

表单验证

import { List, InputItem, Toast } from 'antd-mobile';

class ErrorInputExample extends React.Component {
  state = {
    hasError: false,
    value: '',
  }
  onErrorClick = () => {
    if (this.state.hasError) {
      Toast.info('Please enter 11 digits');
    }
  }
  onChange = (value) => {
    if (value.replace(/\s/g, '').length < 11) {
      this.setState({
        hasError: true,
      });
    } else {
      this.setState({
        hasError: false,
      });
    }
    this.setState({
      value,
    });
  }
  render() {
    return (
      <div>
        <List renderHeader={() => 'Confirm when typing'}>
          <InputItem
            type="phone"
            placeholder="input your phone"
            error={this.state.hasError}
            onErrorClick={this.onErrorClick}
            onChange={this.onChange}
            value={this.state.value}
          >手机号码</InputItem>
        </List>
      </div>
    );
  }
}

ReactDOM.render(<ErrorInputExample />, mountNode);