Javascript React.js-在重新渲染时更新收音机或检查输入

我已经开始在React中编写一个简单的UI，并在ajax调用在所有组件（文本、选择）上都能正常工作后重新呈现输入字段，无线电组和复选框除外

在父对象的“值”属性更改后，我无法在重新渲染时正确检查复选框或无线电组。 我知道该组件正在从控制台输出中重新渲染，现在我还知道检查/选择的状态正在正确计算。但是，这永远不会反映在UI中，UI仍保持初始渲染时的状态

代码如下：

//Mixin used for all form inputs        
var InputField = {
        isValid : function(){
            var input = this.state.value;
            var valid = true;
            if(this.props.validations !== undefined){
                for(var i = 0; i < this.props.validations.length;i++){
                    if(valid){
                        valid = this.props.validations[i](input);
                    }
                }
            }

            this.setState({isValid: valid});
            return valid;
        },

        componentWillReceiveProps: function(newProps){
            this.setState({value: newProps.value});
        },

        getInitialState: function() {
          return {value: this.props.value, isValid: true};
        }
    };
    //the actual component:
    var RadioButtons = React.createClass({
        mixins: [InputField],
        handleChange: function(){
            var props = this.props;
            var selectedOpts = _.map($(React.findDOMNode(this.refs.radiobuttons)).find(':checked'), function(opt){ return parseInt(opt.value); });
            var values = _.map(selectedOpts, function(index){
                return props.options[index];
            });
            if(values.length > 0)
                this.setState({value: values[0]});
            else
                this.setState({value: null});
        },

        render: function(){
            var showProp = this.props.show;
            var i = 0;
            var self = this;
            var options =  _.map(self.props.options,function(opt){
                var selected = show(self.state.value,showProp) === show(opt,showProp);
                console.log(selected);
                var result = (<label className="radio">
                        <span className="checked"><input type="radio" name={self.props.name} value={i} checked={selected} onChange={self.handleChange}>{show(opt,showProp)}</input></span>
                    </label>);
                i = i + 1;
                return result;
            });

            return ( <FormField label={this.props.label} fieldClass="col-md-8" ref="radiobuttons" errorMessage={this.props.errorMessage} isValid={this.state.isValid}> 
            {options}
                </FormField> 
                   );
        }

    }); 

//用于所有表单输入的Mixin
变量输入字段={
isValid:function（）{
var输入=this.state.value；
var valid=true；
if（this.props.validations！==未定义）{
for（var i=0；i0）
this.setState（{value:values[0]}）；
其他的
this.setState（{value:null}）；
},
render:function（）{
var showProp=this.props.show；
var i=0；
var self=这个；
var options=\映射（self.props.options，函数（opt）{
所选变量=显示（self.state.value，showProp）==show（opt，showProp）；
console.log（选中）；
var结果=(
{show（opt，showProp）}
);
i=i+1；
返回结果；
});
报税表（
{options}
);
}
}); 

我对此有点困惑，希望能得到任何帮助

编辑 似乎每个DOM元素和值都设置正确，唯一没有发生的事情是它被直观地反映出来。 怀疑这可能是一般浏览器/JS问题，而不是具体的反应

我一辈子都不能让复选框或广播组 在“值”道具被重新渲染后正确检查 在父对象上更改

这是因为只有在第一次渲染时才调用

getInitialState

。这就是为什么你应该避免将初始状态作为道具传递

如果希望将来的渲染反映传入的新道具，请不要将其值存储在状态中

React具有

可控

和

不可控

组件的概念

• 可控

  组件存储的状态很少。它们以

  prop

  的形式接收几乎所有内容，并公开

  eventHandlers

  以在“状态”更改时通知父级，以便父级可以再次渲染它们。由于它们没有存储太多的状态，所以不能只

  setState

  来重新加载。父母必须这样做

• 无法控制的

  组件将自行工作。它们存储状态，当您更改它们时，它们可以在不受其父母干预的情况下重新加载。

  不可控的

  组件的未来重新招标将不会对其状态产生太大影响

---

您的

收音机

正在充当一个

无法控制的组件。这就是为什么它不响应
prop
更改的原因。
事实证明，这不是React的问题，也不是上面代码的问题：
页面上的jquery.uniform.js似乎干扰了正确显示复选框和无线框更新

讨厌。
这实际上并不能解决问题：首先，mixin更新状态。其次，删除对状态的所有提及，并驱动组件道具不会改变任何事情：组件的可见UI不会在获得新道具时得到更新，尽管控制台输出确认确实调用了render。