Блог

Я создал один пользовательский компонент, альтернативу выбранному компоненту, по щелчку показывает ul и по щелчку скрывает ul.

когда я нажимаю, я могу задать значение для функции «Состояние внутри», но я хочу получить доступ к значению в родительском компоненте.

так что мой компонент-это

  const [showMenu, setShowMenu] = useState(false);
    const [value, setValue] = useState();
    return (
        <>
            <button
                className='btn'
                onClick={() =>
                    showMenu ? setShowMenu(false) : setShowMenu(true)
                }>
                {props.name}
            </button>
            <ul className={showMenu ? "" : "hide"}>
                {props.listsa.map((element) => {
                    return (
                        <li
                            key={element.key}
                            value={element.value}
                            onClick={(e) => {
                                setValue(e.target.value);
                            }}>
                            {element.label}
                        </li>
                    );
                })}
            </ul>
        </>
 

Я хочу получить доступ к значению, упомянутому выше функциональному компоненту в родительском компоненте, который является моим app.js

как показано ниже, это метод возврата родительского компонента.

 <div className='App'>
            {/* <Main /> */}

            <OptionsComponent name='ABC Menu' listsa={abc} />
             {/* here I want to use that value to perfom operations/ also on change it should show changed value */}
        </div>
 

Я попытался использовать localStorage.setItem(«значение»:значение), это работает, но для этого будет использоваться память браузера, поэтому я ищу альтернативный способ.

Я попытался экспортировать переменную, она показывает неопределенную, также я попытался сделать переменную глобальной, она работает, но не отражает изменений.

любая помощь будет признательна

Вам просто нужно поднять штат и передать его вниз, вместо этого:

 const [value, setValue] = useState();

return (
    <div className='App'>
        {/* <Main /> */}
        <OptionsComponent name='ABC Menu' listsa={abc} value={value} setValue={setValue}/>
    </div>
 

И

   const [showMenu, setShowMenu] = useState(false);
  return (
    <>
        <button
            className='btn'
            onClick={() =>
                showMenu ? setShowMenu(false) : setShowMenu(true)
            }>
            {props.name}
        </button>
        <ul className={showMenu ? "" : "hide"}>
            {props.listsa.map((element) => {
                return (
                    <li
                        key={element.key}
                        value={element.value}
                        onClick={(e) => {
                            props.setValue(e.target.value);
                        }}>
                        {element.label}
                    </li>
                );
            })}
        </ul>
      </>
    );