Блог

Главная - Вопросы по программированию - состояние обновления типа ввода выберите при выборе открытия или закрытия ввода

состояние обновления типа ввода выберите при выборе открытия или закрытия ввода

#javascript #reactjs #typescript #next.js #state

Вопрос:

У меня есть проект с nextjs и сценарием ввода. У меня есть пользовательский компонент select, который отображал ввод select, я хочу, чтобы при открытии ввода select я показал вспомогательный значок (например,^), а при закрытии компонента select я показал другой вспомогательный значок (например,amp;). Я пишу логическое состояние, и событие onClick изменяет мое состояние, но это не работает корректно. Это событие срабатывает при выборе открытия и закрытия ввода, но я хочу, чтобы это событие срабатывало при выборе открытия или закрытия ввода В других словах onOpenEvent и onCloseEvent в моем выборе ввода.

это мое состояние и моя функция, которая изменила состояние

     const [isOpenInputSelect,setIsOpenInputSelect]= useState(false);
    const test= () => {
        setIsOpenInputSelect((prevState) => !prevState);
    }
    
      <Select name='birth-date'id='birth-date'onClick={test} 
         helperIcon={ isOpenInputSelect?<Icon name='arrow-bottom' />
                                       :<Icon name='arrow-top' /> }>
         <option value="12">12</option>
         <option selected={true} value="13">13</option>
       </Select>

Я был бы очень признателен, если бы кто-нибудь мог мне помочь

Комментарии:

1. Это <Select> компонент, который вы создали сами, или он из библиотеки?

2. @ЭлдарБ. Я создал этот компонент

3. @Poldark Не могли бы вы, пожалуйста, показать нам код вашего Select компонента?

4. я не могу получить доступ к этому сейчас. мне нужно только событие для открытия или закрытия. выберите input.eg(при выборе ввода открыт console.log («открыть») и при выборе ввода закрыт console.log («закрыт»)) Событие onClick не может мне помочь @juliomalves

5. Вы имеете в виду, что вы также хотите test участвовать в select onChange мероприятии?

Ответ №1:

Ну, я думаю, что вы можете просто достичь этого, просто отрицая свое текущее состояние, например

 const [isOpenInputSelect,setIsOpenInputSelect]= useState(false);
    const test= () => {
        setIsOpenInputSelect(!this.state.isOpenInputSelect);
    }

Попробуйте, чтобы это работало на вас. Спасибо

Метки: