更改无状态组件上的反应状态

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 钩子。