Question

在我的if / else块中，我想使用以下命令检查某个数组是否为空：

else if (emptyFieldNames.length === 0) {
  console.log('no empty fields');
}

我已经控制台记录了'emptyFieldNames'并可以验证它为空，但是代码体不会运行**。

如果填写所有输入字段here in this codepen，然后单击“提交”，您将看到它控制台记录了一个空数组，但未记录该消息。有趣的是，**如果您填写有效的电子邮件，它将控制台记录消息。但是，我不明白为什么这很重要，因为无论是否输入有效的电子邮件，数组仍然为空。

我想念什么？

Answer 1

代码笔中的代码与您在此处发布的代码不太匹配，但是您所看到的基本内容是else/if语句位于if (this.state.errors.email === true)块之后。因此，如果出现电子邮件错误，它们将优先于没有为其他输入输入值。

这就是您现在拥有的：

if (this.state.errors.email === true) {
  invalidEmailMessage.innerHTML = 'Please enter a valid email';
  this.setState({
    errors: {
      email: true,
    },
  });
} else if (emptyFieldNames.length > 0) {
  failMessage.innerHTML =
    'Please complete the following field(s): ' + emptyFieldNames.join(', ');
  invalidEmailMessage.innerHTML = '';
} else if (emptyFieldNames.length === 0) {
  console.log('All fields have data');
}

如果除了提到电子邮件错误之外，还要运行第二个程序段，则可能要删除else关键字。或者，如果您希望一个空的电子邮件字段简单地覆盖任何其他电子邮件错误，则可能需要将该条件块移到顶部，并在以后的else/if中处理电子邮件错误。

Answer 2

看看

this.setState({
    inputs: {
       email: emailInput,
    },
    errors: {
        email: !emailValid,
    },
});

您误解了setState函数，它是第一级合并... 因此，现在，您仅在输入中包含电子邮件，而在错误中包含电子邮件。在else中，看起来不错...

然后您在handleSubmit中使用查询选择器和来自DOM的其他方法，这不是方法，请在this.state中使用值

Answer 3

我知道这不是您要的，但我想与您分享另一种工作方式。从此开始，您可以转到表单构建器，只需在props中获取输入定义

const emailRegexp = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

const emailValidation = (email) => emailRegexp.test(email);
const notBlank = (value) => !!value.trim();

class Page extends React.Component {

    constructor() {
        super();
        this.state = {
            name : {
                type: 'text',
                label : 'Name',
                value : '',
                validation : notBlank,
                error : false
            },
            email : {
                type: 'text',
                label : 'Email',
                value : '',
                validation : emailValidation,
                error : false
            },
            message : {
                type: 'textarea',
                label : 'Message',
                value : '',
                validation : notBlank,
                error : false
            }
        };
    }

    onChange = e => {
        const { name, value } = e.target;

        let error = !this.state[name].validation(value);

        let input = Object.assign({}, this.state[name], {error, value});
        this.setState({ [name] : input });
    };

    onSubmit = e => {
        e.preventDefault();
        let hasError = false;

        let newState = Object.assign(this.state);

        Object.keys(this.state).forEach( k => {
            newState[k].error = !newState[k].validation(newState[k].value);
            hasError = true;
        });


        if( hasError) return this.setState(newState);

        //Here, well do what you want, call an API...
    };

    render() {
        let errors = Object.values(this.state).filter( i => i.error );


        return (
            <div>
                <ul className='errors'>
                    {
                        Object.values(this.state).filter( i => i.error ).map( invalid => <li key={invalid.name}>Enter a valid {invalid.label}</li>)
                    }
                </ul>
                <form noValidate onSubmit={this.onSubmit}>
                    {
                        Object.keys(this.state).map( k => {
                            let input = this.state[k];
                            //Do with className but no css here
                            let style = {};
                            if(input.error) style.color='red';
                            return (
                                <label key={k} style={style}>
                                    <span>{input.label || k}</span>
                                    {input.type === 'textarea' && <textarea
                                            name={k}
                                            onChange={this.onChange}
                                            value={input.value}
                                        />
                                    }
                                    {input.type === 'text' && <input
                                            type={input.type}
                                            name={k}
                                            onChange={this.onChange}
                                            value={input.value}
                                        />
                                    }
                                    {input.error && <span>{input.error}</span>}
                                </label>
                            );
                        })
                    }

                    <button type="submit">Submit</button>
                </form>
            </div>
        );
    }
}
ReactDOM.render(<Page/>, document.querySelector('#app'));

在If / Else块异常行为中检查空数组

3 个答案: