Как исправить ошибку 'Function components cannot be given refs'?

Question

[partyzanx]

Проблему вызывал другой компонент. Извините

Answer 1

[Mikhail Osher]

Попробуйте что-то вроде

// props = route props, ref = route ref
const SignupComponent = React.forwardRef((props, ref) => {
  // ... magic ...
  return (
    <form onSubmit={handleSubmit} ref={ref}>
       ...
    </form>
  )
})

Comments

[partyzanx]

Вот такое сделал, всё равно выдаёт ошибку

import React from 'react';
import { useState } from "react";
import { signup } from 'actions/auth'


const SignupComponent = React.forwardRef((props, ref) => {
  const [values, setValues] = useState({
    name: '',
    email: '',
    password: '',
    error: '',
    loading: false,
    message: '',
    showForm: true
  })

  const handleSubmit = (e) => {
    e.preventDefault();
 }
  const handleChange = name => (e) => {
    setValues({ ...values, error: false, [name]: e.target.value })
  }


  const { name, email, password, error, loading, message, showForm } = values


  const signupForm = () => {
    return (
      <form onSubmit={handleSubmit} ref={ref}>
        <div className="form-group">
          <input onChange={handleChange('name')} type='text' name='name' className="form-control" placeholder='Type your name' value={name} />
        </div>
        <div className="form-group">
          <input onChange={handleChange('email')} type='email' name='email' className="form-control" placeholder='Type your email' value={email} />
        </div>
        <div className="form-group">
          <input onChange={handleChange('password')} type='password' name='password' className="form-control" placeholder='Type your password' value={password} />
        </div>
        <div>
          <button className='btn btn-primary'>
            Sign Up
          </button>
        </div>
      </form>
    )
  }


  return (
    <>
      {signupForm()}
    </>

  )
})

export default SignupComponent

Answer 2

[partyzanx]

Проблему вызывал другой компонент. Извините