xgqfrms , react & e.preventDefault(); & e.stopPropagation();

xgqfrms react-e.preventDefault()-e.stopPropagation().md

react & e.preventDefault(); & e.stopPropagation();

xgqfrms react

    


e.preventDefault();
e.stopPropagation();
e.nativeEvent.stopImmediatePropagation();

ant-design/ant-design#6576

ant-design/ant-design#6834 (comment)

import React from 'react';
import PropTypes from 'prop-types';

import {Form, Icon, Input, Button} from 'antd';
const FormItem = Form.Item;

function hasErrors(fieldsError) {
    return(
        Object
        .keys(fieldsError)
        .some(
            (field) => (fieldsError[field])
        )
    );
}

/* eslint-disable no-console */
// /* eslint-disable react/prop-types */

class HorizontalLoginForm extends React.Component {
    constructor(props, context) {
        super(props, context);
        this.state = {
            data: []
        };
    }
    componentDidMount() {
        // To disabled submit button at the beginning.
        this.props.form.validateFields();
    }
    handleSubmit = (e) => {
        e.preventDefault();
        e.stopPropagation();
        this.props.form.validateFields((err, values) => {
            if (!err) {
                console.log('Received values of form: ', values);
            }
            console.log('values', values);
        });
    }
    render() {
        const {getFieldDecorator, getFieldsError, getFieldError, isFieldTouched} = this.props.form;
        // Only show error after a field is touched.
        const userNameError = isFieldTouched('userName') && getFieldError('userName');
        const passwordError = isFieldTouched('password') && getFieldError('password');
        return (
            <Form layout="inline" onSubmit={this.handleSubmit}>
                <FormItem
                    validateStatus={userNameError ? 'error' : ''}
                    help={userNameError || ''}
                    >
                    {
                        getFieldDecorator('userName', {
                            rules: [
                                {
                                    required: true,
                                    message: 'Please input your username!'
                                }
                            ],
                        })(
                            <Input
                                prefix={<Icon type="user" style={{ fontSize: 13 }} />}
                                placeholder="Username"
                            />
                        )
                    }
                </FormItem>
                <FormItem
                    validateStatus={passwordError ? 'error' : ''}
                    help={passwordError || ''}
                    >
                    {
                        getFieldDecorator('password', {
                            rules: [
                                {
                                    required: true,
                                    message: 'Please input your Password!'
                                }
                            ],
                        })(
                            <Input
                                prefix={<Icon type="lock" style={{ fontSize: 13 }} />}
                                type="password"
                                placeholder="Password"
                            />
                        )
                    }
                </FormItem>
                <FormItem>
                    <Button
                        type="primary"
                        htmlType="submit"
                        disabled={
                            hasErrors(getFieldsError())
                        }
                        >
                        Log in
                    </Button>
                </FormItem>
            </Form>
        );
    }
}

/* eslint-enable */

const WrappedHorizontalLoginForm = Form.create()(HorizontalLoginForm);

const WHLF = WrappedHorizontalLoginForm;

export {WHLF};
export default WHLF;

Global_Objects

Object.keys() & Array.some()

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys

Object.keys() 方法会返回一个由一个给定对象的自身可枚举属性组成的数组，
数组中属性名的排列顺序和使用 for...in 循环遍历该对象时返回的顺序一致
(两者的主要区别是 一个 for-in 循环还会枚举其原型链上的属性)。

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/some

some() 方法测试数组中的某些元素是否通过由提供的函数实现的测试。

/**
 * 
 * @param {function} fieldsError 
 * @returns boolean
 * 
 * @demo: hasErrors(getFieldsError())
 * 
 */
function hasErrors(fieldsError) {
    return(
        Object
        .keys(fieldsError)
        .some(
            (field) => (fieldsError[field])
        )
    );
}

/* Array 对象 */ 
let arr = ["a", "b", "c"];

console.log(Object.keys(arr)); 
// "0,1,2"

/* 类数组 对象 */ 
let obj = { 0 : "a", 1 : "b", 2 : "c"};

console.log(Object.keys(obj)); 
// "0,1,2"

// 类数组 对象, 随机 key 排序 
let anObj = { 100: 'a', 2: 'b', 7: 'c' }; 

console.log(Object.keys(anObj)); 
// ['2', '7', '100']


/* Object 对象 */ 

let abc = {a: "a", b: "b", c: "c"}; 

console.log(Object.keys(abc)); 
// (3) ["a", "b", "c"] 

let xyz = {x: "xxx", y: "yyy", z: "zzz"}; 

console.log(Object.keys(xyz)); 
// (3) ["x", "y", "z"]

Object.keys()

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/keys

Object.keys(obj) / Object.keys(arr)

let abc = {a: "a", b: "b", c: "c"};
console.log(Object.keys(abc));
// (3) ["a", "b", "c"]

let xyz = {x: "xxx", y: "yyy", z: "zzz"};
console.log(Object.keys(xyz));
// (3) ["x", "y", "z"]


// array like object with random key ordering
let anObj = { 100: 'a', 2: 'b', 7: 'c' };
console.log(Object.keys(anObj)); 
// ['2', '7', '100']


// 类数组 对象, 随机 key 排序 
let anObj = { 100: 'a', 2: 'b', 7: 'c' }; 

console.log(Object.keys(anObj)); 
// ['2', '7', '100']


/* getFoo 是个不可枚举的属性 */ 

let my_obj = Object.create(
    {}, 
    {
        getFoo: {
            value: function() {return this.foo;}
        }
    }
);

my_obj.foo = 1;

console.log(Object.keys(my_obj)); 
// ["foo"]

console.log(my_obj);
// {foo: 1, getFoo: ƒ}