Как сделать так чтобы при клике на инпут появлялось модальное окно?

Question

[SamPorter]

Как сделать так чтобы при нажатии на input currency, появлялось модальное для выбора валюты, и чтобы при выборе значение присваивалось в value=" "

const Pay = ()=>{
  
    const amounts = [ 5, 10, 15 ];
    const [ amount, setAmount ] = useState(null);
    const [ isCustomAmount, setIsCustomAmount ] = useState(false);


  ///Это значение для value
   const Data = [
    "currency"  [
      {"BTC": "btc"},
      {"BUSD": "busd"},
      {"DAI": "dai"},
      {"AXS": "axs"}
    ]
   ]
  //  'BUSD', 'DAI', 'AXS', 'DASH', 'DOGE', 'ETH', 'HUSD', 'LTC',
  //  'TUSD', 'USDC', 'USDT', 'USDT (OMNI)', 'XRP', 'TRX', 'USDT (TRC20)', 'AXS (TRC20)',
  //   'HT (TRC20)', 'HUSD (TRC20)', 'ETH (TRC20)','BNB', 'BUSD (BEP20)', 'ETH (BEP20)',
  //    'DAI (BEP20)', 'USDT (BEP20)', 'DESU (BEP20)', 'ADA (BEP20)', 'USDC (BEP20)',
  //     'BTCB (BEP20)', 'CSC'

    return(
        <>
             <div className={styles.wrapper}>
          <div className={styles.container}>
         
          <form action="https://app.0xProcessing.com/Payment" method="post">
            <input  type="hidden" name="test" value="true" />
             <input type="email" name="email" placeholder='Email'/>


              ///Вот тут
             <input type="text" name="currency" placeholder='Валюта'/>


   <div className={styles.mid}>
  <div className={styles.choice}>
    {amounts.map((value)=>{
      return(
        <label  key={value}>
          <input   name="amountusd"   type="radio" value={value}
                 onChange={() => {
                   setIsCustomAmount(false);
                   setAmount(value)
                 }}
          />
          <span>{value}$</span>
        </label>
      )
    })}
    <label  key={'any'}>
      <input   name="amountusd"  type="radio" value={'any'}
             onChange={(e) => {
               setIsCustomAmount(true);
               setAmount(0); 
             }}
      />
      <span style={{fontSize:'10px'}}>{'Другая сумма'}</span> </label>
  </div>
  {isCustomAmount && <input value={amount} type='text' name="amountusd" onChange={e => setAmount(+e.target.value)} placeholder='Введите сумму'  />}

</div>         
               <input type="hidden" name="ShopId" value="6QsQHcQ6bX" />
               <input type="hidden" name="ClientId" value={''} />
              <input type="hidden" name='SuccessUrl' value={`https://next-js-web-sandy.vercel.app/success/`}/>
              <input type="hidden" name='AutoReturn' value="true" />
              <button type="submit">Send</button>
          </form>       
          </div>
         </div>
         <h1 className={styles.heading}><Link href={`/`}><button>Назад</button></Link></h1>
        </>
    )
}

export default Pay

Answer 1

[Natebash]

1. На клик по инпуту повесить хэндлер открывающий состояние модалки, либо же повесить на focus, как удобнее.
2. В открытой модалке, при кликена валюту сетать валюту в onChange состояния currency, и закрывать модалку если currency имеет значение.
3. Так как инпут у вас связанный с состоянием useState - value у вас будет содержать в себе тот currency который вы выбрали из модалки.

Comments

[SamPorter]

Natebash , хэндлер вы имеете ввиду функцию onClick? И что значит состояние модалки?

[Natebash]

SamPorter, Да.
У вас модалка имеет состояние isShow = true | false. Обычно состояние модалки описывают либо через useState, либо через поле в сторе (например redux). Состояние модалки вы изменяете на true - при фокусе\клике на инпут, и false после получения currency из модалки

[SamPorter]

Natebash благодарю, и с новым годом