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

Question

У меня есть выбор из 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

Answer 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 для теста, вам надо эту строчку заменить на желаемое значение.

БЛОГ НА HUSL

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

Ответы (1 шт):