我已经开始在 React 中编写一个简单的 UI,并且在 ajax 调用后重新渲染输入字段在所有组件(文本、选择)上都可以正常工作,除了单选按钮组和复选框。
在父项上的“value”属性更改后,我一生都无法在重新渲染时正确检查复选框或单选组。 我知道组件正在从控制台输出中重新渲染,而且我现在也可以正确计算选中/选定的状态。然而,这永远不会反射(reflect)在 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 元素和值都设置正确,唯一没有发生的是它在视觉上反射(reflect)出来。 怀疑这可能是一个一般的浏览器/JS 问题,而不是专门针对 React 的问题?
最佳答案
I can't for the life of me get checkboxes or radio groups to be correctly checked on a re-render after the "value" prop has been changed on a parent
这是因为 getInitialState
仅在第一次渲染时调用。这就是为什么你应该避免将初始状态作为 prop 传递。 Here's an answer of mine regarding the same topic .
如果您希望 future 的渲染反射(reflect)传入的新 Prop ,请不要将它们的值存储在状态中。
React 有可控
和不可控
组件的概念。
可控
组件存储很少的状态。它们几乎接收所有内容作为prop
并公开eventHandlers
以在“状态”更改时通知父级,以便父级可以再次渲染它们。由于它们不存储太多状态,因此不能仅通过setState
来重新渲染。家长必须这样做。无法控制
组件将自行工作。它们存储状态,当您更改它们时,它们能够在无需 parent 干预的情况下重新渲染。不可控
组件的 future 重新渲染不会对其状态产生太大影响。
您的 radio
充当无法控制
组件。这就是为什么它不响应 prop
更改。
关于javascript - React.js - 更新 radio 或检查重新渲染时的输入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31729936/