как преобразовать компонент класса в компонент функции с помощью хуков в reactjs

Мой код в компоненте класса

Я все еще новичок в изучении React, и мне трудно преобразовать компоненты класса в функциональные компоненты.

  class App extends React.Component {
  handleChange = (e) => {
    const { name, value } = e.target
    this.setState({
      [name]: value
    })
  }
  configureCaptcha = () => {
    window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('sign-in-button', {
      'size': 'invisible',
      'callback': (response) => {

        this.onSignInSubmit();
        console.log("Recaptca varified")
      },
      defaultCountry: "IN"
    });
  }
  onSignInSubmit = (e) => {
    e.preventDefault()
    this.configureCaptcha()
    const phoneNumber = "+91" + this.state.mobile
    console.log(phoneNumber)
    const appVerifier = window.recaptchaVerifier;
    firebase.auth().signInWithPhoneNumber(phoneNumber, appVerifier)
      .then((confirmationResult) => {
        window.confirmationResult = confirmationResult;
        console.log("OTP has been sent")
      }).catch((error) => {
        console.log("SMS not sent")
      });
  }

  render() {
    .....
    )
  }
}
export default App;

Мой вывод в классе Component

введите здесь описание изображения

как преобразовать компонент класса в компонент функции с помощью хуков в reactjs


reactjs react-functional-component react-hooks react-class-based-component
person soma iyappan    schedule 29.06.2021    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Код будет выглядеть с новым синтаксисом следующим образом. Но я бы рекомендовал хранить значения name и mobile строго отдельными useStates, чтобы код был более понятным:

const App = () => {
  const [values, setValues] = useState({});

  const handleChange = (e) => {
    const { name, value } = e.target;

    setValues({ [name]: value, ...values });
  };

  const configureCaptcha = () => {
    window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier(
      "sign-in-button",
      {
        size: "invisible",
        callback: (response) => {
          onSignInSubmit();
          console.log("Recaptca varified");
        },
        defaultCountry: "IN",
      }
    );
  };

  const onSignInSubmit = (e) => {
    e.preventDefault();
    configureCaptcha();
    const phoneNumber = "+91" + values.mobile;
    console.log(phoneNumber);
    const appVerifier = window.recaptchaVerifier;
    firebase
      .auth()
      .signInWithPhoneNumber(phoneNumber, appVerifier)
      .then((confirmationResult) => {
        window.confirmationResult = confirmationResult;
        console.log("OTP has been sent");
      })
      .catch((error) => {
        console.log("SMS not sent");
      });
  };

  return <div></div>;
};

export default App;
person Tarik Huber    schedule 29.06.2021
comment
Большое спасибо...... - person soma iyappan; 29.06.2021