изменение состояния реакции на компоненте без состояния

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')

edit начало родительского компонента

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

Насколько я знаю, вам не нужно передавать 'display-none' в качестве аргумента в функцию setShowHide () в дочернем компоненте, поскольку это уже определено как значение по умолчанию в хуке useState () в родительском компоненте. Кроме того, вы не пропускаете ни одного из ваших родительских компонентов c в качестве поддержки того, что я собираю из приведенного выше кода. Единственные используемые вами реквизиты - это className и onClick, которые предварительно встроены в элемент кнопки в JSX / HTML. Если вы сможете предоставить родительский компонент, я смогу помочь вам в решении этой проблемы. PS - вы не используете ловушку useState React нигде в предоставленном вами дочернем компоненте.

Answer 2

Вам также нужно передать функцию через реквизит.

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