今日份学习及问题总结

2021/1/13 from gxc

class FormTest extends Component{
    constructor(props){
        super(props);   
    }

    Submit = (e) =>{
        e.preventDefault();
        console.log('submit')
        this.props.form.validateFields((err, value) => {
            // console.log('Form Value', value)
            // console.log('111')
            // if (!err) {
            //     console.log('Received values of form: ', value);
            // }
            console.log('err',err)
        })
    }

    validatePassword = (rule, value, callback) => {
        const { form } = this.props;
        if (value && this.state.confirmDirty) {
          form.validateFields(['confirm'], { force: true });
        }
        callback();
    };

    render(){
        const { getFieldDecorator } = this.props.form
        return(
            <Form onSubmit={ this.Submit }>
                <Form.Item label="账号">
                    {
                        getFieldDecorator('ID',{
                            rules: [
                                {
                                    required: true,
                                    message: '请输入账号'
                                }
                            ]
                        })(
                            <Input placeholder="请输入账号" />
                        )
                    }
                </Form.Item>
                <Form.Item label="密码">
                    {
                        getFieldDecorator('passWord',{
                            rules: [
                                {
                                    required: true,
                                    message: '请输入密码'
                                },
                                // {
                                //     validator: this.validatePassword
                                // }
                                {
                                    pattern: /^[a-z]+[a-z0-9|_]*[a-z0-9]+$/,
                                    message:'账户名，由小写字母、数字和下划线组成,且由小写字母开头。'
                                }
                            ]
                        })(
                            <Input type="password"  />
                        )
                    }
                </Form.Item>
                {/* 自定义校验 */}
                <Form.Item label="自定义校验">
                    {
                        getFieldDecorator('validator',{
                            rules:[
                                {
                                    validator: (rule, value, callback)=>{
                                        console.log('rules',rule,'value',value)
                                        if(value > 1000){
                                            callback('已输入大于1000')
                                        }
                                    }
                                }
                            ]
                        })(
                            <Input placeholder="自定义校验" type='number'></Input>
                        )
                    }
                </Form.Item>
                <Form.Item>
                    <Button htmlType="submit" type="primary">确认</Button>
                </Form.Item>
            </Form>
        )
    }
}

const FormTestShow = Form.create({ name: 'FormShow' })(FormTest)

export default class Demo extends Component {
    constructor(props){
        super(props);
    }

    render(){
        return(
            <div>
                <FormTestShow parent={this}/>
            </div>
        )
    }
}

以上是自定义校验学习代码，明天补一下学setState修改数组字段