Question

这是一个非常简单的登录表单。我的问题是登录按钮。当用户名和密码控制中没有值时，显然登录按钮被禁用。但是，一旦我将凭据保存在浏览器中，下次调用表单时，它就会与保存的凭据一起弹出。遗憾的是，登录按钮仍然处于禁用状态。

import React, { Component } from "react";
import { Button, FormGroup, FormControl, FormLabel } from "react-bootstrap";
import PropTypes from "prop-types";

export default class LogIn extends Component {
static propTypes = {
    onLoggedIn: PropTypes.func.isRequired
};

constructor(props) {
    super(props);

    this.state = {
        username: "",
        password: ""
    };
}

validateForm() {
    return this.state.username.length > 0 && this.state.password.length > 0;
}

handleChange = event => {
    this.setState({
        [event.target.id]: event.target.value
    });
};

handleSubmit = async(event) => {
    event.preventDefault();

    const { onLoggedIn } = this.props;

    let data = {
        'username' : this.state.username,
        'password' : this.state.password
    };

    let url = `/slot_monitor/worker/login`;
    let response = await fetch(url,
        {
            method: "POST",
            body : JSON.stringify(data),
            headers:{
                'Content-Type': 'application/json'
            }
        });
    let result = await response.json();
    if (result) {
        return onLoggedIn()
    }

    //todo login failed
    debugger;
};

render() {
    return (
        <div className="Login">
            <form onSubmit={this.handleSubmit}>
                <FormGroup controlId="username" bssize="large">
                    <FormLabel>Username</FormLabel>
                    <FormControl
                        autoFocus
                        value={this.state.username}
                        type="text"
                        onChange={this.handleChange}
                    />
                </FormGroup>
                <FormGroup controlId="password" bssize="large">
                    <FormLabel>Password</FormLabel>
                    <FormControl
                        value={this.state.password}
                        onChange={this.handleChange}
                        type="password"
                    />
                </FormGroup>
                <Button
                    block
                    bssize="large"
                    disabled={!this.validateForm()}
                    type="submit"
                >
                    Login
                </Button>
            </form>
        </div>
    );
}
}

Answer 1

恕我直言，问题在于您的validate函数未绑定到当前上下文。

尝试：

$params = [
        "size" => 5000,
        'index' => 'my_post',
        'type' => 'my_post',
        'body' => [

            'query' => [
                'bool' => [
                    'should' => [
                        [

                            'match' => ['poststatus_id' => 'public']
                        ],
                        [
                            "bool" => [
                                "must" => [
                                    "match" => [
                                        'poststatus_id' => 'only_me',
                                    ],
                                    "match" => [
                                        'creator.user_id' => $user
                                    ]
                                ]
                            ]


                        ],

                        [
                            "bool" => [
                                "must" => [
                                    [
                                        "match" => [
                                            "poststatus_id" => "followers"
                                        ]
                                    ],
                                    [
                                        "terms" => [
                                            "creator.user_id" => [1,2,3,4]
                                        ]
                                    ]
                                ]
                            ]
                        ]
                    ],
                ]
            ],

        ]
    ];

Answer 2

下次调用表格this.state.username和this.state.username时为空。输入字段可以由浏览器自己填写（自动完成）。

如果您提高状态，则可以解决问题：https://reactjs.org/docs/lifting-state-up.html

Answer 3

我也认为Mosè Raguzzini所说的是问题所在。由于某种原因，我无法在笔记本电脑上安装react-bootstrap，因此无法真正对其进行测试。但是，我确实有话要说

如果问题是validateForm()函数无法正确查看this.state.username和this.state.password的值，那是因为this的值取决于最不容易记住的规则

如果您可以使用react钩子（从React 16.8.0起可用），请考虑仅将带状态的功能组件与useState（）一起使用，而不要考虑基于类的组件。使用功能组件，您不必使用this。而且没有this，每个值都只能按预期找到

您可以将组件重写为如下所示的功能组件

import React, { useState } from 'react';
import { Button, FormGroup, FormControl, FormLabel } from "react-bootstrap";
import PropTypes from "prop-types";

const LogIn = (props) => {
    const [state, setState] = useState({
        username: "",
        password: ""
    });

    const validateForm = () => {
        return state.username.length > 0 && state.password.length > 0;
    };

    const handleChange = (event) => {
        setState({
            [event.target.id]: event.target.value
        });
    };

    const handleSubmit = async(event) => {
        event.preventDefault();

        const { onLoggedIn } = props;

        let data = {
            'username' : state.username,
            'password' : state.password
        };

        let url = `/slot_monitor/worker/login`;
        let response = await fetch(url,
            {
                method: "POST",
                body : JSON.stringify(data),
                headers:{
                    'Content-Type': 'application/json'
                }
            });
        let result = await response.json();
        if (result) {
            return onLoggedIn()
        }

        //todo login failed
        debugger;
    };

    return (
        <div className="Login">
            <form onSubmit={handleSubmit}>
                <FormGroup controlId="username" bssize="large">
                    <FormLabel>Username</FormLabel>
                    <FormControl
                        autoFocus
                        value={state.username}
                        type="text"
                        onChange={handleChange}
                    />
                </FormGroup>
                <FormGroup controlId="password" bssize="large">
                    <FormLabel>Password</FormLabel>
                    <FormControl
                        value={state.password}
                        onChange={handleChange}
                        type="password"
                    />
                </FormGroup>
                <Button
                    block
                    bssize="large"
                    disabled={!validateForm()}
                    type="submit"
                >
                    Login
                </Button>
            </form>
        </div>
    );
};

LogIn.Proptypes = {
    onLoggedIn: PropTypes.func.isRequired
}

export default LogIn;

反应由浏览器更新的受控组件

3 个答案: