Index.js

const [sendVia, setSendVia] = useState('astrolger');
const changeValue = (e) => {
    e.preventDefault();
    console.log(e.target.value)
    setSendVia(e.target.value);
};

const handleSubmit = async e => {
    e.preventDefault();
};

 <div className='row mt-2'>
  <div className='col' onChange={e => changeValue(e)}>
   <p>Send By:</p>
   <input type="radio" id="astrologer" name="sendBy" value="astrolger" />  
   <label htmlFor="astrologer" className='ml-1'>Astrologer</label>
   <input type="radio" id="disciple" name="sendBy" value="disciple" className='ml-2'  />
   <label htmlFor="disciple" className='ml-1'>Disciple</label><br />
  </div>
 </div>

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

0
Shubham Bhardwaj 3 Мар 2021 в 16:36

1 ответ

Лучший ответ

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

const [sendVia, setSendVia] = useState('astrolger');
    const changeValue = (e) => {
        console.log(e.target.value)
        setSendVia(e.target.value);
    };
    
    const handleSubmit = async e => {
        e.preventDefault();
    };
    
     <div className='row mt-2'>
      <div className='col' onChange={e => changeValue(e)}>
       <p>Send By:</p>
       <input type="radio" id="astrologer" name="sendBy" value="astrolger" />  
       <label htmlFor="astrologer" className='ml-1'>Astrologer</label>
       <input type="radio" id="disciple" name="sendBy" value="disciple" className='ml-2'  />
       <label htmlFor="disciple" className='ml-1'>Disciple</label><br />
      </div>
     </div>
0
Near 3 Мар 2021 в 13:45