账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    antd-mobile表单验证问题
    35
    0

    antd-mobile表单的“基本”示例和“错误验证”示例,代码如下:https://mobile.ant.design/com...

    1、“基本”示例

    import { List, InputItem, WhiteSpace } from 'antd-mobile';
    import { createForm } from 'rc-form';
    
    class BasicInputExample extends React.Component {
      componentDidMount() {
        // this.autoFocusInst.focus();
      }
      handleClick = () => {
        this.inputRef.focus();
      }
      render() {
        const { getFieldProps } = this.props.form;
        return (
          <div>
            <List renderHeader={() => 'Customize to focus'}>
              <InputItem
                {...getFieldProps('autofocus')}
                clear
                placeholder="auto focus"
                ref={el => this.autoFocusInst = el}
              >标题</InputItem>
              <InputItem
                {...getFieldProps('focus')}
                clear
                placeholder="click the button below to focus"
                ref={el => this.inputRef = el}
              >标题</InputItem>
              <List.Item>
                <div
                  style={{ width: '100%', color: '#108ee9', textAlign: 'center' }}
                  onClick={this.handleClick}
                >
                  click to focus
                </div>
              </List.Item>
            </List>
    
            <List renderHeader={() => 'Whether is controlled'}>
              <InputItem
                {...getFieldProps('control')}
                placeholder="controled input"
              >受控组件</InputItem>
              <InputItem
                defaultValue="Title"
                placeholder="please input content"
                data-seed="logId"
              >非受控组件</InputItem>
            </List>
    
            <WhiteSpace />
    
            <List renderHeader={() => 'Click label to focus input'}>
              <InputItem
                placeholder="click label to focus input"
                ref={el => this.labelFocusInst = el}
              ><div onClick={() => this.labelFocusInst.focus()}>标题</div></InputItem>
            </List>
    
            <List renderHeader={() => 'Show clear'}>
              <InputItem
                {...getFieldProps('inputclear')}
                clear
                placeholder="displayed clear while typing"
              >标题</InputItem>
            </List>
    
            <WhiteSpace />
    
            <List renderHeader={() => 'Number of words for title'}>
              <InputItem
                {...getFieldProps('label8')}
                placeholder="limited title length"
                labelNumber={5}
              >标题过长超过默认的5个字</InputItem>
            </List>
    
            <WhiteSpace />
    
            <List renderHeader={() => 'Custom title(text / image / empty)'}>
              <InputItem
                {...getFieldProps('input3')}
                placeholder="no label"
              />
              <InputItem
                {...getFieldProps('inputtitle2')}
                placeholder="title can be icon,image or text"
              >
                <div style={{ backgroundImage: 'url(https://zos.alipayobjects.com/rmsportal/DfkJHaJGgMghpXdqNaKF.png)', backgroundSize: 'cover', height: '22px', width: '22px' }} />
              </InputItem>
            </List>
    
            <WhiteSpace />
    
            <List renderHeader={() => 'Customize the extra content in the right'}>
              <InputItem
                {...getFieldProps('preice')}
                placeholder="0.00"
                extra="¥"
              >价格</InputItem>
            </List>
    
            <WhiteSpace />
            <List renderHeader={() => 'Format'}>
              <InputItem
                {...getFieldProps('bankCard', {
                  initialValue: '8888 8888 8888 8888',
                })}
                type="bankCard"
              >银行卡</InputItem>
              <InputItem
                {...getFieldProps('phone')}
                type="phone"
                placeholder="186 1234 1234"
              >手机号码</InputItem>
              <InputItem
                {...getFieldProps('password')}
                type="password"
                placeholder="****"
              >密码</InputItem>
              <InputItem
                {...getFieldProps('number')}
                type="number"
                placeholder="click to show number keyboard"
              >数字键盘</InputItem>
              <InputItem
                {...getFieldProps('digit')}
                type="digit"
                placeholder="click to show native number keyboard"
              >数字键盘</InputItem>
            </List>
    
            <WhiteSpace />
    
            <List renderHeader={() => 'Not editable / Disabled'}>
              <InputItem
                value="not editable"
                editable={false}
              >姓名</InputItem>
              <InputItem
                value="style of disabled `InputItem`"
                disabled
              >姓名</InputItem>
            </List>
          </div>
        );
      }
    }
    
    const BasicInputExampleWrapper = createForm()(BasicInputExample);
    ReactDOM.render(<BasicInputExampleWrapper />, mountNode);

    2、“错误验证”示例

    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);

    问题:
    1、“基本”示例使用了rc-form,“错误验证”示例没有使用rc-form,那么rc-form的使用场景是什么?
    2、getFieldProps()怎么使用,代码中都是{...getFieldProps('control')}这样使用的,意思就是这个函数返回一个对象,那么这个对象里面究竟是什么内容?

    0
    打赏
    收藏
    点击回答
        全部回答
    • 共 0 条
    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部