仅当标签被点击时，反应无线电输入才会改变

我为无线电输入创建了一个受控组件。
单选按钮不会被检查，除非我点击标签。仅当标签被点击时，反应无线电输入才会改变

实际的后端状态值更改以及我用于“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中 –

仅当标签被点击时，反应无线电输入才会改变

回答

相关问题