javascript - 访问渲染方法内的构造函数变量 - Reactjs

Question

我有一个简单的注册表单，如下面的代码所示，旨在在提交时显示我的验证消息。代码大部分是react和纯js。

import React from 'react';

class Register extends React.Component {

    constructor() {
        super();
        this.handleSubmit  = this.handleSubmit.bind(this);
        this.validationMsg = [];
    }

    handleSubmit(event) {
        event.preventDefault();

        let target   = event.target;

        for (let i = 0; i < target.length; i++) {

            let item = target.elements[i];
            let name = item.getAttribute("name")
            let msg  = name + ' is required.'

            if (item.value === '') {
                this.validationMsg.push({
                    [name]: msg
                });
            }
        }
        console.log('validationMsg', this.validationMsg);
    }

    render () {
        return (
            <form onSubmit={this.handleSubmit}>
                <input type="text" name="username" />
                {this.validationMsg.username}
                <input type="text" name="email" />
                {this.validationMsg.email}
                <input type="submit" name="submit" value="SIGN UP" />
            </form>
        );
    }
}

export default Register;

我的问题是如何从构造函数中访问声明的 this.validationMsg渲染方法。

基本上我想说的是，我的 {this.validationMsg.username} 或 {this.validationMsg.email} 无法正常工作，这意味着它不显示任何内容，也不显示任何内容。抛出任何错误。

但是，当我单击“提交”时，我可以在

的 handleSubmit 函数中查看我想要的结果

console.log('validationMsg', this.validationMsg);

如何在 render() 方法内显示 this.validationMsg 的值？

Answer 1

您的错误消息实际上存储在类的普通变量中。因此，组件将不会呈现以显示错误消息。您应该将其存储在组件状态中。您可以找到有关 React 组件如何处理数据更改的更多详细信息 here .

这是使用状态的更新代码。和工作codepen .

class Register extends React.Component {
    constructor() {
        super();
        this.handleSubmit  = this.handleSubmit.bind(this);
        this.state = {
          validationMsg: {}
        };
    }

    handleSubmit(event) {
        event.preventDefault();

        let target = event.target;
        const validationMsg = {};

        for (let i = 0; i < target.length; i++) {

            let item = target.elements[i];
            let name = item.getAttribute("name")
            let msg  = name + ' is required.'

            if (item.value === '') {
              validationMsg[name] = msg;
            }
        }
        this.setState({ validationMsg });
    }

    render () {
        return (
            <form onSubmit={this.handleSubmit}>
                <input type="text" name="username" />
                {this.state.validationMsg.username}
                <input type="text" name="email" />
                {this.state.validationMsg.email}
                <input type="submit" name="submit" value="SIGN UP" />
            </form>
        );
    }
}