React.js-更新无线电或在重新渲染时检查输入

Question

我已经开始在React中编写一个简单的UI，并在ajax调用之后在所有组件（文本，选择）上正常工作，然后重新渲染输入字段，单选组和复选框除外。

在更改了父项的“值”属性后，我无法终生获得重新渲染时要正确检查的复选框或广播组。 我知道该组件正在从控制台输出中重新呈现，而且我现在还可以正确计算出checked / selected状态。 但是，这永远不会反映在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> 
                   );
        }

    }); 

我对此感到有些困惑，不胜感激。

编辑似乎每个DOM元素和值都已正确设置，唯一没有发生的事情是它在视觉上得到反映。 怀疑这可能是浏览器/ JS的一般问题，而不是专门的React？

Answer 1

在更改父项的“值”属性后，我无法终生重新选择复选框或广播组，以进行重新渲染

这是因为getInitialState仅在第一个渲染时被调用。 这就是为什么您应该避免将初始状态作为道具传递的原因。 这是我关于同一主题的答案 。

如果希望将来的渲染反映正在传递的新道具，请不要在状态中存储它们的值。

React具有Controllable和Uncontrollable Controllable组件的概念。

• Controllable组件存储的状态很少。 他们接受几乎所有的prop ，他们暴露eventHandlers通知家长当“状态”的变化，以便家长可以再次渲染它们。 由于它们不存储太多状态，因此不能仅将setState重新呈现。 父母必须这样做。

• Uncontrollable组件将自己工作。 他们存储状态，当您更改状态时，他们可以在没有父母干预的情况下重新提交。 将来重新释放uncontrollable组件不会对其状态产生太大影响。

您的Radio是uncontrollable组件。 这就是为什么它不响应prop更改的原因。

Answer 2

事实证明，这不是React的问题，也不是上面的代码的问题：页面上的jquery.uniform.js似乎以某种方式干扰了复选框和单选框更新的正确显示。

讨厌。