javascript - 单选按钮未单击单击

Question

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>

单击时值正在更改，但双击时选项正在更改 不知道为什么当我单击弟子时，值会立即更改，但我必须双击以显示更改后的值。任何帮助将不胜感激

Answer 1

我不明白您为什么在 onChange 函数中使用 e.preventDefault 。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>