我在为 React 中的单选按钮组件设置默认选项时遇到了令人惊讶的困难。
这是我的RadioToggle
成分:
/** @jsx React.DOM */
var RadioToggle = React.createClass({
render: function () {
var self = this;
return (
<div className="RadioToggle">
{this.props.radioset.radios.map(function(radio, i){
return (
<label className="__option" key={i}>
<h3 className="__header">{radio.label}</h3>
{radio.checked ?
<input className="__input"
type="radio"
name={self.props.radioset.name}
value={radio.value}
defaultChecked />
: <input className="__input"
type="radio"
name={self.props.radioset.name}
value={radio.value} />
}
<span className="__label"></span>
</label>
)
})
}
</div>
);
}
});
module.exports = RadioToggle;
这是我创建组件的方式:
<RadioToggle radioset={
{
name: "permission_level",
radios: [
{
label: "Parent",
value: 1,
checked: false
},
{
label: "Child",
value: 0,
checked: true
}
]}
}/>
上面的代码可以工作,但是我们不喜欢根据不同的情况生成几乎相同的代码radio.checked
option.
组件的设置方式是,我向它传递一个名称和一个要创建的单选数组,然后对于单选数组中的每个对象,使用该数据创建一个单选按钮。
在其他情况下,我可以通过将三元语句作为值来有条件地设置属性,如下所示,但这在这里不起作用。
问题在于defaultChecked={radio.checked ? "checked" : ""}
即使输出变成checked="checked"
在一个单选按钮上并且checked
另一方面,它使两个单选按钮默认选中,导致最后一个actually正在检查中。
同样,上面的组件可以工作,但我希望对 React 有更多经验的人能够有一种更干净的方法来完成它,而不是生成除该属性之外几乎相同的元素。