react-hooks

问题 I want to show input results when I focused on this input and hide this result when I blur. I 'v used this code but not work with blur useEffect(() => { if (inputElMovie.current.focus) { console.log("meme") } }, [movies,inputElMovie]); 回答1: You don't need useEffect for this case. Create a custom hook with useState() , and return a boolean ( show ), and an object of event handlers you can spread on the input: const { useState, useMemo } = React const usToggleOnFocus = (initialState = false) =>

问题 I am creating a page for user to update personal data with React-Hook-Form. Once paged is loaded, I use useEffect to fetch the user's current personal data and set them into default value of the form. I put the fetched value into defaultValue of <Controller /> . However, it is just not showing in the text box. Here is my code: import React, {useState, useEffect, useCallback} from 'react'; import { useForm, Controller } from 'react-hook-form' import { URL } from '../constants'; const

问题 I am creating a page for user to update personal data with React-Hook-Form. Once paged is loaded, I use useEffect to fetch the user's current personal data and set them into default value of the form. I put the fetched value into defaultValue of <Controller /> . However, it is just not showing in the text box. Here is my code: import React, {useState, useEffect, useCallback} from 'react'; import { useForm, Controller } from 'react-hook-form' import { URL } from '../constants'; const

问题 I'd like to change the props using react hooks, and I found the way passing setState function as props to the child. Container.tsx const Container: React.FC = () => { const [num, setNum] = useState(0); return <Counter num={num} setNum={setNum} />; }; Counter.tsx interface CounterProps { num: number; setNum: React.Dispatch<React.SetStateAction<number>>; } const Counter: React.FC<CounterProps> = ({ num, setNum }) => { const handleClick = () => { setNum(num + 1); }; return ( // jsx codes... ); }

问题 When creating a React app, if I use the hook useSelector , I need to adhere to the hooks invoking rules (Only call it from the top level of a functional component). If I use the mapStateToProps , I get the state in the props and I can use it anywhere without any issues... What are the benefits of using the hook besides saving lines of code compared to mapStateToProps ? 回答1: Since no one knows how to answer, it seems like the best answer is that you should NOT be using useselector when you

问题 When creating a React app, if I use the hook useSelector , I need to adhere to the hooks invoking rules (Only call it from the top level of a functional component). If I use the mapStateToProps , I get the state in the props and I can use it anywhere without any issues... What are the benefits of using the hook besides saving lines of code compared to mapStateToProps ? 回答1: Since no one knows how to answer, it seems like the best answer is that you should NOT be using useselector when you

问题 I try to create AppBar clipped to the page top and hovering over other Drawer with React Hooks and Material Ui using class name. All as described in: https://material-ui.com/demos/drawers/#clipped-under-the-app-bar So we have const useStyles = makeStyles(theme => ({ root: { display: 'flex', height: '100%', }, drawer: { width: drawerWidth, flexShrink: 0, }, appBar: { zIndex: theme.zIndex.drawer + 1, }, menuButton: { marginRight: 20, [theme.breakpoints.up('md')]: { display: 'none', }, }, }));

问题 I try to create AppBar clipped to the page top and hovering over other Drawer with React Hooks and Material Ui using class name. All as described in: https://material-ui.com/demos/drawers/#clipped-under-the-app-bar So we have const useStyles = makeStyles(theme => ({ root: { display: 'flex', height: '100%', }, drawer: { width: drawerWidth, flexShrink: 0, }, appBar: { zIndex: theme.zIndex.drawer + 1, }, menuButton: { marginRight: 20, [theme.breakpoints.up('md')]: { display: 'none', }, }, }));

问题 I'm trying do create a Navigation Bar that when the user click on one of the links, the page scrolls to some section. In the code above, each element is a section of my page: <Navbar scrollFunc={scrollToRef} /> <Mainlogo ref={mainLogoRef} /> <Sales ref={salesRef} /> <Introduction ref={introductionRef} /> <Blog ref={blogRef} /> <Footer /> The 'refs' was declares as folowing, using the useRef hook: const mainLogoRef = useRef(null) const salesRef = useRef(null) const introductionRef = useRef

问题 I'm trying do create a Navigation Bar that when the user click on one of the links, the page scrolls to some section. In the code above, each element is a section of my page: <Navbar scrollFunc={scrollToRef} /> <Mainlogo ref={mainLogoRef} /> <Sales ref={salesRef} /> <Introduction ref={introductionRef} /> <Blog ref={blogRef} /> <Footer /> The 'refs' was declares as folowing, using the useRef hook: const mainLogoRef = useRef(null) const salesRef = useRef(null) const introductionRef = useRef