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

您也需要通过道具传递功能。

df1.start_date = pd.to_datetime(df1.start_date)
df1.end_date = pd.to_datetime(df1.end_date)
df2.holiday = pd.to_datetime(df2.holiday)

Answer 2

据我所知，您不必在子组件的setShowHide（）函数中将“ display-none”作为参数传递，因为已经在useState（）钩子中将其定义为默认值在父组件中。而且，您不会将任何上级组件逻辑作为我从上面的代码中收集的道具传递下来。您正在使用的唯一道具是JSX / HTML中预先内置在button元素中的className和onClick。如果您可以提供父组件，则我可以为您提供进一步的解决方案。 PS-您没有在提供的子组件的任何地方使用useState React钩子。

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

2 个答案: