时间戳

首页 > 解决方案 > React onChange 需要双击才能获得选定的值

javascript - React onChange 需要双击才能获得选定的值

问题描述

我目前有一个接受“是”或“否”（无线电）的表格。

我想要的是将所选值传递给状态。我设法让它工作，但问题是我需要双击选择它才能注册。

以下是我当前代码的场景： 默认值为“否”，如果我单击“是”，该值仍然是“否”。如果我双击“是”，该值将变为“是”。如果我再次单击“否”，该值仍然保持“是”，直到我双击“否”

这些是我当前的代码：

//Initialize variables
const [answer,setAnswer] = useState({
        has_commendations: false,
        has_complaints: false      
    })

关于答题功能

const onStaticAnswerClick = (e,number) => {
        // Static question number 7
        if(number === 7) {
            setAnswer({
                ...answer,
                has_commendations:Boolean(Number(e.target.value))
              
            })

        }
        
        // Static question number 8
        if(number === 8) {
            setAnswer({
                ...answer,
                has_complaints:Boolean(Number(e.target.value)),

            })
            
        }
    }

电台选择

<div className="ml-2 mt-1 d-flex flex-row mt-2">
  <div className="form-check form-check-inline">
    <input 
       className="form-check-input" 
       type="radio" 
        onClick={e => onStaticAnswerClick(e,7)} 
        name="inlineRadioOptions" 
        id="inlineRadio17"
        value={0}
        defaultChecked
  />
  <label className="form-check-label" htmlFor="inlineRadio1">No</label>
        </div>
    <div className="form-check form-check-inline ml-3">
      <input 
        className="form-check-input" 
          type="radio" 
           onClick={e => onStaticAnswerClick(e,7)} 
            name="inlineRadioOptions" 
             id="inlineRadio17"
             value={1}
         />

     <label className="form-check-label" htmlFor="inlineRadio2">Yes</label>
   </div>

我现在真的很难过。预先感谢您的帮助！

标签： javascriptreactjs

解决方案

而不是onClick，尝试使用onChange

 <input 
    className="form-check-input" 
    type="radio" 
    onChange={e => onStaticAnswerClick(e,7)} 
    name="inlineRadioOptions" 
    id="inlineRadio17"
    value={1}
     />

推荐阅读