如何修改React组件以使用钩子? [英] How to modify React component to use hooks?

问题描述

以下是不带钩子的登录组件.该组件具有两个输入字段和一个提交按钮.我们如何才能修改该组件以使用钩子并将其转换为可以使用状态的功能组件?

Below is a login component without hooks. This component has two input fields and a submit button. How can we modify this component to use hooks and convert this component into a functional component that can use states?

import React from 'react';
import { userService } from '../services/user.services';

class Login extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            username: '',
            password: '',
            submitted: false,
            loading: false,
            error: ''
        }
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleSubmit(e) {
        e.preventDefault();
        this.setState({ submitted: true });
        const data = this.state;
        userService.login(data.username, data.password)
            .then(
                user => {
                    const { from } = this.props.location.state || { from: { pathname: "/" } };
                    this.props.history.push(from);
                }
            );
    }

    handleChange(e) {
        const { name, value } = e.target;
        this.setState({ [name]: value });
    }

    render() {
        const { ...data } = this.state;
        return (
            <div className="login-box">
                <h1>Travel With Us</h1>
                <form onSubmit={this.handleSubmit}>
                    <div className="text-box">
                        <i className="fa fa-user"></i>
                        <input type="text" name="username" defaultValue={data.username} onChange={this.handleChange} placeholder="Username" />
                    </div>
                    <div className="text-box">
                        <i className="fa fa-lock" />
                        <input type="password" name="password" defaultValue={data.password} onChange={this.handleChange} placeholder="Passward" />
                    </div>
                    <button className="btn" value="login">Sign in</button>
                </form>
            </div>
        );
    }
}
export default Login;

推荐答案

下面是我已转换为使用钩子的示例代码.

Below is the sample code which I have converted to use hooks.

import React, { useState } from 'react';

import { userService } from '../services/user.services';
const LoginHooks = (props) => {

    const [username, setUsername] = useState("");
    const [password, setPassword] = useState("");
    const [submitted, setSubmit] = useState(false);    

    let handleSubmit = function (e) {
        e.preventDefault();
        console.log(submitted);
        setSubmit(true);        
        userService.login(username, password)
            .then(
                user => console.log(user)
            );
    };

    return (
        <div className="login-box">
            <h1>Login</h1>
            <form onSubmit={handleSubmit}>
                <div className="text-box">
                    <i className="fa fa-user"></i>
                    <input type="text" name="username" defaultValue={username} onChange={({target}) => setUsername(target.value)} placeholder="Username" />
                </div>
                <div className="text-box">
                    <i className="fa fa-lock" />
                    <input type="password" name="password" defaultValue={password} onChange={({target}) => setPassword(target.value)} placeholder="Passward" />
                </div>
                <button className="btn" value="login">Sign in</button>
            </form>
        </div>
    );
}


export default LoginHooks;

这篇关于如何修改React组件以使用钩子?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！