React.js -在重新渲染时更新无线电或检查输入
React.js - update radio or check input on re-render
我已经开始在React中编写一个简单的UI,并且在ajax调用之后重新呈现输入字段在所有组件(文本,选择)上工作良好,除了单选组和复选框。
在父属性的"value"属性被改变后,我无法让复选框或单选组在重新渲染时被正确选中。我知道组件正在从控制台输出中重新呈现,并且我现在也知道检查/选择状态正在正确计算。然而,这永远不会反映在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?
我无论如何也不能让复选框或无线电组成为正确检查"value"道具后的重新渲染修改父节点
这是因为getInitialState
只在第一次渲染时被调用。这就是为什么应该避免将初始状态作为prop传递。这是我对同一话题的回答。
如果你想让未来的渲染反映传入的新道具,不要在状态中存储它们的值。
React有Controllable
和Uncontrollable
组件的概念。
-
Controllable
组分状态存储很少。它们接收几乎所有的prop
,当"状态"发生变化时,它们暴露eventHandlers
来通知父进程,这样父进程就可以再次呈现它们。因为它们没有存储太多的状态,所以它们不能只使用setState
来渲染。 -
Uncontrollable
组件将自行工作。它们存储状态,当您更改它们时,它们能够在没有父母干预的情况下进行呈现。未来uncontrollable
组件的渲染不会对它们的状态有太大的影响。
您的Radio
充当uncontrollable
组件。这就是为什么它不响应prop
的变化
事实证明,这不是React的问题,也不是上面的代码:似乎jquery.uniform.js,它在页面上以某种方式干扰了正确显示复选框和单选框更新。
。
- Javascript循环不会自我更新
- 添加文字和评论功能更新Div
- AngularJS:ng之后,重复$scope值未按预期更新
- 如何通过数组更新角度子范围
- Ajax聊天消息重复而不仅仅是更新
- 通过CSV文件上载更新数据库表
- 平均值:无法将数据更新到数据库
- $rootScope未使用forEach进行更新
- d3基于用户选择动态更新节点
- 有条件更新d3.js力图中节点的最佳方法
- Angular:更新一次性绑定的数据
- Javascript更新孙窗口中的表单元素
- 使用AngularJS中的筛选器更新给定的表
- 从选项页面更新chrome扩展清单权限
- 如何在不刷新页面的情况下更新显示框
- 延期承诺值未更新/解析/延期
- 当输入位于标签内时,更新无线电标签文本
- Extjs正在使用更新的无线电项目数组重新加载无线电组
- 输入无线电ng-model没有更新
- React.js -在重新渲染时更新无线电或检查输入