1

У меня есть выбор из 4 кнопок, 3 кнопки чтобы выбирать определённую сумму, и 1 для Другой суммы, когда нажимаю на Другую сумму, появляется инпут снизу, но не могу сделать так чтобы при клике на кнопку состоящей из фиксированной суммы, пропадал инпут для ввода другой суммы

const Pay = ()=>{
    
    const amounts = [ 5, 10, 15 ];
    const [ amount, setAmount ] = useState(null);
    const [ isCustomAmount, setIsCustomAmount ] = useState(false);
    
    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' required />
             <input type="text" name="currency" placeholder='Валюта'  required />

            <div className={styles.mid}>
            <div   className={styles.choice}>
             {amounts.map((value)=>{
               return(
                   
                  <label  key={value}>
                  <input   type="radio" value={value} disabled={isCustomAmount} checked={amount === value && !isCustomAmount}
                    onChange={() => setAmount(value)}  
                  />
                  <span>{value}$</span>
                </label>              
               )
             })}
                        
               <label > <input  className={styles.word_opts} type="checkbox" checked={isCustomAmount} style={{display: 'none'}}
               onChange={e => (setAmount(null), setIsCustomAmount(e.target.checked))}  />
                <span className={styles.span}>Другая сумма</span>
               </label>
               </div>
                      {isCustomAmount && <input value={amount} onChange={e => setAmount(+e.target.value)} placeholder='Введите сумму'  />}
                     
            </div>
            

             
               <input type="hidden" name="ShopId" value="6QsQHcQ6bX" />
               <input type="hidden" name="ClientId" value={payKey.data} />
              <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

1 ответ 1

1

На мой взгляд, правильный вариант, это объединить все radio в одну группу и работать в рамках нее

<div className={styles.mid}>
  <div className={styles.choice}>
    {amounts.map((value)=>{
      return(

        <label  key={value}>
          <input name={'val'}  type="radio" value={value}
                 onChange={() => {
                   setIsCustomAmount(false);
                   setAmount(value)
                 }}
          />
          <span>{value}$</span>
        </label>
      )
    })}
    <label  key={'any'}>
      <input name={'val'}  type="radio" value={'any'}
             onChange={(e) => {
               setIsCustomAmount(true);
               // Нужно заменить этот рандом на значение 
               // или стирать значение переменной amount
               setAmount(Math.round(Math.random() * 20)); 
             }}
      />
      <span>{'Другая сумма'}</span> </label>


  </div>
  {isCustomAmount && <input name={'inputVal'} value={amount} onChange={e => setAmount(+e.target.value)} placeholder='Введите сумму'  />}

</div>

При клике на "Другая сумма", будет отображаться поле ввода. Так у вас для суммы определена переменная amount, то при отображении поля, будет подставляться предыдущее выбранное.

Я поставил random для теста, вам надо эту строчку заменить на желаемое значение.

11
  • Тестировал в песочнице
    – SwaD
    30 дек 2022 в 13:09
  • Здраствуйте, благодарю за ответ, могу ли я оставить пустым setAmount() вместо рандомного числа setAmount(Math.round(Math.random() * 20)) @SwaD, это никак не повлияет на другие значения?
    – Jalil
    30 дек 2022 в 13:32
  • @Jalil Тогда уж лучше передавайте пустую строку setAmount('')
    – SwaD
    30 дек 2022 в 13:34
  • есть одна несостыковка, в каждом инпуте должен быть name={'amountusd'}, но кроме инпута который выполняет фунцию кнопки, а если name у всех будет разный то всё что вы написали перестаёт работать
    – Jalil
    30 дек 2022 в 14:03
  • пожалуйста помогите решить это @SwaD
    – Jalil
    30 дек 2022 в 14:38

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.