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;

回答1:

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;