Блог

Главная - Вопросы по программированию - Я хочу использовать здесь крючки, но не знаю как . Это мой код

Я хочу использовать здесь крючки, но не знаю как . Это мой код

#reactjs #react-hooks

Вопрос:

Проблема, я хочу использовать крючки внутри своего кода, чтобы получить имя пользователя и пароль пользователя, чтобы сохранить его в MySQL, у меня нет кода для входа в систему, но сейчас я просто хочу сохранить имя пользователя и пароль. я ничего не знаю о крючках в react, Теперь мой вопрос в том, где и как я могу использовать крючки внутри этого кода

     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>
    );
  }
}

Комментарии:

1. будьте конкретны в своем вопросе ? где вам нужны пользовательские крючки?

2. Ваш вопрос и ваш код неполны для ответа

3. Я хочу использовать крючки внутри своего кода, чтобы получить имя пользователя и пароль пользователя для его хранения в MySQL.У меня нет кода для входа, но сейчас я просто хочу сохранить имя пользователя и пароль. я ничего не знаю о крючках в react, Теперь мой вопрос в том, где и как я могу использовать крючки внутри этого кода

4. У вас есть не один, а два useState s! Поздравляю, вы используете крючки. Есть ли что-то конкретное, в чем вам нужна помощь? На самом деле вы здесь не задаете вопроса.

5. Я бы начал с некоторых руководств по крючкам и документов.

Ответ №1:

Крючки React нельзя использовать вне функциональных компонентов.

Здесь у вас есть регистрация компонентов класса (также нельзя использовать крючки). Вам нужно преобразовать его в функциональный компонент и добавить в него свои крючки состояния. Кроме того, вы можете использовать обратный вызов для функции мгновенного вызова.

 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>
}
Метки: ,