僅當標籤被點擊時，反應無線電輸入纔會改變

我爲無線電輸入創建了一個受控組件。
單選按鈕不會被檢查，除非我點擊標籤。僅當標籤被點擊時，反應無線電輸入纔會改變

實際的後端狀態值更改以及我用於「checked」屬性的邏輯正在觸發，它只是不想正確呈現。

（在這個例子中，我使用我爲我的目的而創建一個自定義字段的對象。）

function RadioInput (props) { 

    return (
     <input 
      type='radio' 
      name={props.field.name} 
      disabled={props.field.disabled} 
      onChange={ (evt) => {console.log('fire onChange'); props.field.onChange(props.choice) } } 
      onFocus={ (evt) => props.field.onFocus(evt) } 
      onBlur={ (evt) => props.field.onBlur(evt) } 
      style={errStyle} 

      id={props.field.name + '-' + props.choice} 
      value={props.choice} 
      checked={(console.log('fire checked', props.field.name, props.choice, props.field.value, props.choice === props.field.value)) || (props.choice === props.field.value) } 
     /> 
    ) 
}

所以，當我點擊的實際單選按鈕，可以看我的日誌輸出擊發檢查，所有的值都是正確的。它只是不想正確渲染。

當我單擊此輸入的標籤時，會生成相同的控制檯輸出，但會正確呈現無線電檢查狀態。

我在做什麼錯？

更新： 沒有標籤的功能。只是採用了直板標籤與htmlFor

<label htmlFor={"radio button name"}>LABEL TEXT</>

UPDATE2： 這裏演示了這個工作的codepen。 http://codepen.io/anon/pen/pegxyr?editors=0010

我會重新檢討我的代碼算出這個

UPDATE3： 我放棄了，只是做了一個自定義CSS單選按鈕。這比理想的要少得多，因爲我無法按照人們通常所期望的方式選擇表單。超級沮喪。

來源

2017-03-02 w--

checked屬性的值應該設置爲true。你可以嘗試設置， checked = {props.field.val === true}這樣的事情，然後使props.field.value爲真？ – Nitesh

您可以顯示您用於標籤的功能嗎？ –

@nitesh：checked屬性將是真或假。此處的值必須正確，否則單擊標籤也不起作用。 –

沒有理由不應該這樣做。這個問題可能與您的onChange函數有關，該函數不會更改或者傳遞給Input組件的值。也許通過匹配我做了什麼，你可以成功更新組件http://codepen.io/DeividasK/pen/bqEmGp

：

我創建了一個工作示例爲您服務。

來源

2017-03-02 06:19:30

謝謝你將這支筆放在一起。我稍微修改它以類似於我正在做的更多。正如你所提到的，沒有理由說這不起作用，所以它必須是本地的東西。 http://codepen.io/anon/pen/pegxyr?editors=0010 –

@ w--那麼你還需要幫助還是解決了？如果你仍然需要幫助，如果你可以在你的OP上添加一個修改過的筆，這將是很好的，所以我可以看看它。 –

我要重新審視我所得到的。我剛剛粘貼修改過的筆之前就進入了回車。我編輯了評論。我也會把它放在OP中 –

僅當標籤被點擊時，反應無線電輸入纔會改變

回答

相關問題