ant-mobile中使用rc-form

迈不过友情╰ 2021-11-12 00:06 350阅读 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);