Question

我为无线电输入创建了一个受控组件除非我点击标签，否则单选按钮不会被检查。

实际的后端状态值会发生变化，而我用来检查＆＃39;的逻辑是什么？属性正在触发，它只是不想正确渲染。

（在这个例子中，我使用我为自己的目的创建的自定义字段对象。）

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单选按钮。这远远不够理想，因为我不能像通常期望的那样通过表格进行制表。超级沮丧。

Answer 1

没有理由不这样做。问题可能在于您的onChange函数，该函数不会更改，也不会与您传递给Input组件的值相关。

我为您创建了一个工作示例：http://codepen.io/DeividasK/pen/bqEmGp

也许通过匹配我所做的事情，您可以成功更新您的组件。

仅当单击标签时，React无线电输入才会更改

1 个答案: