更改无状态组件上的 React 状态

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(( 钩子中定义为默认值。此外，您不会从我从上面的代码中收集到的内容中将任何父组件逻辑作为 props 向下传递。你使用的唯一道具是 className 和 onClick 它们预构建在 JSX/HTML 中的按钮元素中。如果您可以提供父组件，我也许能够帮助您进一步解决此问题。PS - 您没有在您提供的子组件中的任何位置使用 useState React 钩子。