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>

单选按钮未单击单击

1 个答案: