我想在这里使用 Hooks 但不知道如何。这是我的代码答案

【问题标题】：I want to use Hooks here but don't know how . This is my code我想在这里使用 Hooks 但不知道如何。这是我的代码
【发布时间】：2021-09-27 01:43:05
【问题描述】：

问题我想在我的代码中使用挂钩来获取用户名和密码以将其存储到 MySql 我没有任何登录代码，但现在我只想存储用户名和密码。我对反应中的钩子一无所知现在我的问题是在哪里以及如何在这段代码中使用钩子

    import React, { useState } from "react";
import loginImg from "../../login.svg";
import Axios from "axios";

const [usernameReg, setUsernameReg] = useState("");
const [passwordReg, setPasswordReg] = useState("");
const register = () => {
  Axios.post("https://localhost3001/register", {
    username: usernameReg,
    password: passwordReg,
  }).then((response) => {
    console.log(response);
  });
};


export const Register= () => {
  constructor(props) {
    super(props);
  }

  render() {
    
    return (
      <div className="base-container" ref={this.props.containerRef}>
        <div className="header">Register</div>
        <div className="content">
          <div className="image">
            <img src={loginImg} />
          </div>
          <div className="form">
            <div className="form-group">
              <label htmlFor="username">Username</label>
              <input
                type="text"
                name="username"
                placeholder="username"
                onChange={(e) => {
                  setUsernameReg(e.target.value);
                }}
              />
            </div>
            <div className="form-group">
              <label htmlFor="email">Email</label>
              <input type="text" name="email" placeholder="email" />
            </div>
            <div className="form-group">
              <label htmlFor="password">Password</label>
              <input
                type="text"
                name="password"
                placeholder="password"
                onChange={(e) => {
                  setPasswordReg(e.target.value);
                }}
              />
            </div>
          </div>
        </div>
        <div className="footer">
          <button type="button" onClick={register} className="btn">
            Register
          </button>
        </div>
      </div>
    );
  }
}

【问题讨论】：

具体到您的问题？您必须在哪里使用钩子？
您的问题和代码不完整，无法回答
我想在我的代码中使用钩子来获取用户的用户名和密码以将其存储到 MySql 我没有任何登录代码，但现在我只想存储用户名和密码。我对反应中的钩子一无所知现在我的问题是在哪里以及如何在这段代码中使用钩子
你不是一个，而是两个useStates！恭喜，您正在使用钩子。你有什么具体需要帮助的吗？你不是真的在这里问问题。
我会从一些钩子教程和文档开始。

标签： reactjs react-hooks

【解决方案1】：

React 钩子不能在 functional components 之外使用。

这里，你有一个类组件（也不能使用钩子）注册。您需要将其转换为功能组件并将您的状态挂钩附加到其中。另外，您可以useCallback 使用momize功能。

export const Register = (props) => {
    const [usernameReg, setUsernameReg] = useState("");
    const [passwordReg, setPasswordReg] = useState("");

    const register = useCallback(() => { //You also can use hook useCallback for memoize fucntion 
      Axios.post("https://localhost3001/register", {
        username: usernameReg,
        password: passwordReg,
      }).then((response) => {
        console.log(response);
      });
    }, [usernameReg, passwordReg]);

    return <div className="base-container" ref={this.props.containerRef}>
        <div className="header">Register</div>
        <div className="content">
          <div className="image">
             <img src={loginImg} />
          </div>
          <div className="form">
             <div className="form-group">
                <label htmlFor="username">Username</label>
                <input
                    type="text"
                    name="username"
                    placeholder="username"
                    onChange={(e) => {
                        setUsernameReg(e.target.value);
                    }}
                    value={usernameReg} //Don't forget about use value attribute from state
                />
             </div>
             <div className="form-group">
                <label htmlFor="email">Email</label>
                <input type="text" name="email" placeholder="email" />
             </div>
             <div className="form-group">
                <label htmlFor="password">Password</label>
                <input
                    type="text"
                    name="password"
                    placeholder="password"
                    onChange={(e) => {
                        setPasswordReg(e.target.value);
                    }}
                    value={passwordReg} //Don't forget about use value attribute from state
                />
             </div>
          </div>
        </div>
        <div className="footer">
          <button type="button" onClick={register} className="btn">
          Register
          </button>
        </div>
    </div>
}

【讨论】：