更改無狀態組件上的反應狀態

Question

嘿伙計們！

我在這里試圖用鈎子做一些事情，但不知道如何實現它。 這是我的代碼：

import React, { useState } from 'react'
import { useForm } from 'react-hook-form'
import {useDispatch } from 'react-redux'
import { Login, Logout } from '../../store/actions/Auth'
import '../layout/modalBanG.css'

function LogIn({showHide}){

    const dispatch = useDispatch()
    console.log(showHide)


    const {register, handleSubmit} = useForm()
    const onSubmit = (credentials) => {
        !credentials ? (
        dispatch(Login(credentials))) :
        dispatch(Logout())
    }
    return (
            <>
            <div className={showHide} >
               <div className="card modal-secondary p-3">
                   <button className="btn btn-danger btn-sm float-right p-3" onClick={()=> setShowHide('display-none')}><b>X</b></button>
                   AA
               </div>
            </div>




        </>
        )
    }

export default LogIn

基本上在父組件上我有鈎子const [showHide, setShowHide] = useState('display-none')

編輯父組件開始

function Nav (){

    const [x, setX] = useState('topnav');
    const [showHide, setShowHide] = useState('display-none')

    return(
        <div className="ml-md-5 ml-2 mr-sm-5 mr-2">
        <div className="row" style={{alignItems: 'center', width: '100%'}}>
            <div className="col-6 col-sm-3 col-md-3  pl-sm-5 pr-sm-5 pl-2 pr-2">
                <Link to="/"><img src={logo} alt="logo" id="logo" /></Link>
            </div>

            <div className="col-md-5 d-none d-md-block " >
                <input 
                    // className="fields form-control" 
                    type="text"  
                    placeholder="sök"/>
            </div>

                <div className="col-6 col-md-4 d-none d-lg-block rounded float-right  pl-sm-5 pr-sm-5 pl-2 pr-2">
                    <p onClick={() =>setShowHide('display-block') } > <img src={user} alt="" id=""/> <small> logga in</small></p>
                    <a href="aa" className="icon rounded float-right p-2 text-sm" ><img src={bag} alt="bag" id="bag"/>  <small> varukorg</small></a> 
                </div> 
 <div className="col-6 col-md-4 d-none d-sm-block d-lg-none rounded float-right justify-content-end  pl-sm-5 pr-sm-5 pl-2 pr-2">
                    <a href="aa" className="icon rounded float-right p-2"><small><img src={user} alt="" id=""/> </small>  </a>
                    <a href="aa" className="icon rounded float-right p-2" ><small> <img src={bag} alt="bag" id="bag"/></small> </a> 
                </div>
            <Login showHide={showHide}/>

這是所討論的兩個組件。 我也考慮過傳遞該函數，但遵循了 fb 教程並沒有取得任何進展。

這就是為什么有點來這里尋求幫助的原因，因為你們是世界上存在的非常好的知識來源！

Answer 1

你也需要通過 props 傳遞函數。

import React, { useState } from 'react'
import { useForm } from 'react-hook-form'
import {useDispatch } from 'react-redux'
import { Login, Logout } from '../../store/actions/Auth'
import '../layout/modalBanG.css'

function LogIn({showHide, setShowHide}){

    const dispatch = useDispatch()
    console.log(showHide)


    const {register, handleSubmit} = useForm()
    const onSubmit = (credentials) => {
        !credentials ? (
        dispatch(Login(credentials))) :
        dispatch(Logout())
    }
    return (
            <>
            <div className={showHide} >
               <div className="card modal-secondary p-3">
                   <button className="btn btn-danger btn-sm float-right p-3" onClick={()=> setShowHide('display-none')}><b>X</b></button>
                   AA
               </div>
            </div>




        </>
        )
    }

export default LogIn

Answer 2

據我所知，您不必在子組件的 setShowHide() 函數中將“display-none”作為參數傳遞，因為它已經定義為父組件中 useState() 掛鈎中的默認值成分。 此外，您沒有將任何父組件邏輯作為道具傳遞給我從上面的代碼中收集的內容。 您使用的唯一道具是 className 和 onClick，它們被預先構建到 JSX/HTML 中的按鈕元素中。 如果您可以提供父組件，我或許可以幫助您進一步解決此問題。 PS - 您沒有在您提供的子組件中的任何地方使用 useState React 鈎子。