React：將ref傳遞給兄弟組件Function組件-有解無憂

首先這是我的父組件：

import React from 'react'
import logo from '../Assets/LOGO.png'
import EmailInput from '../Components/LoginPage/EmailInput'
import PasswordInput from '../Components/LoginPage/PasswordInput'
import Rememberme from '../Components/LoginPage/Rememberme'
import SigninInput from '../Components/LoginPage/SigninInput'

import '../Styles/Login/login.css'
function Login() {
  return (
    <main>
      <div className='top'>
        <img src={logo} alt='Netflix' />
      </div>
      <section>
        <div className='si-card'>
          <h2>Sign In</h2>
          <EmailInput />
          <PasswordInput />
          <SigninInput />
          <Rememberme />
        </div>
      </section>
    </main>
  )
}

export default Login

`PasswordInput`：

import React from 'react'

function PasswordInput() {
  const passwordRef = React.useRef()
  function passwordValidation() {
    let value = passwordRef.current.value
    if (value.length <= 6) {
      console.log('Password must be smaller than 4 charectar')
    }
  }
  return (
    <div className='input-co'>
      <input
        type='password'
        id='password'
        placeholder=' '
        onChange={passwordValidation}
        ref={passwordRef}
      />
      <label htmlFor='password'>Password</label>
    </div>
  )
}

export default PasswordInput

`EmailInput`：


import React from 'react'

function EmailInput() {
  const reg = /^\w ([\\.-]?\w )*@\w ([\\.-]?\w )*(\.\w{2,3}) $/
  const emailRef = React.useRef()

  function emailValidation() {
    let value = emailRef.current.value
    if (!reg.test(value)) {
      console.log('Enter a valid email')
    }
  }
  return (
    <div className='input-co'>
      <input
        type='email'
        id='email'
        placeholder=' '
        onChange={emailValidation}
        ref={emailRef}
      />
      <label htmlFor='email'>Email or phone number</label>
    </div>
  )
}

export default EmailInput

`SigninInput`：

import React from 'react'

function SigninInput() {
  return <button className='signin'>Sign in</button>
}

export default SigninInput

我怎樣才能將 ref 從EmailInput和passwordInput到傳遞SigninInput？

當用戶單擊登錄按鈕時，我想訪問兩個輸入的值

uj5u.com熱心網友回復：

React 的通常流程是將值作為道具傳遞給孩子。你不能直接在兄弟姐妹之間傳遞任何東西。但是，您可以控制父組件或父背景關系中的狀態，并從那里將資料作為道具發送到需要它們的組件。

我將使用 Login 作為父級來構建您的應用程式，將 EmailInput 和 PasswordInput 的值作為狀態處理。

登錄：

function Login() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  function handleEmailChange(value) {
    setEmail(value);
  }

  function handlePasswordChange(value) {
    setPassword(value);
  }

  function handleSignIn() {
    // use the values here
  }

  return (
    <main>
      <div className="top">
        <img src={logo} alt="Netflix" />
      </div>
      <section>
        <div className="si-card">
          <h2>Sign In</h2>
          <EmailInput onChange={handleEmailChange} />
          <PasswordInput onChange={handlePasswordChange} />
          <button className="signin" onClick={handleSignIn}>
            Sign in
          </button>
          <Rememberme />
        </div>
      </section>
    </main>
  )
}

密碼輸入：

function PasswordInput({ onChange }) {
  const passwordRef = React.useRef()
  function passwordValidation() {
    let value = passwordRef.current.value
    if (value.length <= 6) {
      console.log("Password must be smaller than 4 charectar")
    }
    onChange(value)
  }
  return (
    <div className="input-co">
      <input type="password" id="password" placeholder=" " onChange={passwordValidation} ref={passwordRef} />
      <label htmlFor="password">Password</label>
    </div>
  )
}

export default PasswordInput

電子郵件輸入：

function EmailInput({ onChange }) {
  const reg = /^\w ([\\.-]?\w )*@\w ([\\.-]?\w )*(\.\w{2,3}) $/
  const emailRef = React.useRef()

  function emailValidation() {
    let value = emailRef.current.value
    if (!reg.test(value)) {
      console.log("Enter a valid email")
    }
    onChange(value)
  }
  return (
    <div className="input-co">
      <input type="email" id="email" placeholder=" " onChange={emailValidation} ref={emailRef} />
      <label htmlFor="email">Email or phone number</label>
    </div>
  )
}

export default EmailInput

uj5u.com熱心網友回復：

使用state比使用template refs來獲取輸入值更好。
在這種情況下，您需要將輸入狀態存盤在父組件中，并將它們作為道具傳遞給子組件。

import React from 'react'
import logo from '../Assets/LOGO.png'
import EmailInput from '../Components/LoginPage/EmailInput'
import PasswordInput from '../Components/LoginPage/PasswordInput'
import Rememberme from '../Components/LoginPage/Rememberme'
import SigninInput from '../Components/LoginPage/SigninInput'

import '../Styles/Login/login.css'
function Login() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleSubmit = () => {
    console.log('email: '   email);
    console.log('password: '   password);
  }
  return (
    <main>
      <div className='top'>
        <img src={logo} alt='Netflix' />
      </div>
      <section>
        <div className='si-card'>
          <h2>Sign In</h2>
          <EmailInput email={email} setEmail={setEmail} />
          <PasswordInput password={password} setPassword={setPassword} />
          <SigninInput handleSubmit={handleSubmit} />
          <Rememberme />
        </div>
      </section>
    </main>
  )
}

export default Login

PasswordInput:


import React from 'react'

function PasswordInput({ password, setPassword }) {
  function passwordValidation(e) {
    const value = e.target.value
    setPassword(value)
    if (value.length <= 6) {
      console.log('Password must be smaller than 4 charectar')
    }
  }
  return (
    <div className='input-co'>
      <input
        type='password'
        id='password'
        placeholder=''
        value={password}
        onChange={passwordValidation}
      />
      <label htmlFor='password'>Password</label>
    </div>
  )
}

export default PasswordInput

EmailInput:

import React from 'react'

function EmailInput({ email, setEmail }) {
  const reg = /^\w ([\\.-]?\w )*@\w ([\\.-]?\w )*(\.\w{2,3}) $/

  function emailValidation(e) {
    const value = e.target.value
    setEmail(value)
    if (!reg.test(value)) {
      console.log('Enter a valid email')
    }
  }
  return (
    <div className='input-co'>
      <input
        type='email'
        id='email'
        placeholder=' '
        value={email}
        onChange={emailValidation}
      />
      <label htmlFor='email'>Email or phone number</label>
    </div>
  )
}

export default EmailInput

SigninInput:

import React from 'react'

function SigninInput({ handleSubmit }) {
  return <button className='signin' onClick={handleSubmit}>Sign in</button>
}

export default SigninInput

uj5u.com熱心網友回復：

初始化父級的 ref 變數，并通過 forward ref 將它們作為 props 傳遞給子級

function Login() {
  const emailRef = React.useRef()
  const passwordRef = React.useRef()

  return (
    <main>
      <div className='top'>
        <img src={logo} alt='Netflix' />
      </div>
      <section>
        <div className='si-card'>
          <h2>Sign In</h2>
          <EmailInput ref={emailRef} />
          <PasswordInput ref={passwordRef} />
          <SigninInput email={emailRef.current.value}  password={passwordRef.current.value} />
          <Rememberme />
        </div>
      </section>
    </main>
  )
}



export default EmailInput = React.forwardRef((ref) =>{ ....


function SigninInput({email = "",password = ""}) { ...

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/520406.html

標籤：javascripthtml反应

上一篇：png圖片懸停CSS效果

下一篇：如何從CDC網站以CSV檔案格式下載表格？

React：將ref傳遞給兄弟組件Function組件

PasswordInput：

EmailInput：

SigninInput：

登錄：

密碼輸入：

電子郵件輸入：

`PasswordInput`：

`EmailInput`：

`SigninInput`：