[英]Conditionally setting html attributes in React.js
I'm having a surprisingly hard time setting a default option for a radio button component in React. 我在React中为单选按钮组件设置默认选项时遇到了惊人的困难。
Here is my RadioToggle
component: 这是我的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;
And here is how I'm creating the component: 以下是我创建组件的方式:
<RadioToggle radioset={
{
name: "permission_level",
radios: [
{
label: "Parent",
value: 1,
checked: false
},
{
label: "Child",
value: 0,
checked: true
}
]}
}/>
The above code works, but we don't like generating almost identical code depending on the radio.checked
option. 上面的代码有效,但我们不喜欢根据radio.checked
选项生成几乎相同的代码。
The way the component is set up, I pass it a name and an array of radios to create, and for each object in the radios array use that data to create a radio button. 组件的设置方式,我传递一个名称和一组无线电来创建,并为无线电阵列中的每个对象使用该数据创建一个单选按钮。
In other cases I've been able to conditionally set attributes by putting ternary statements as the value, like below, but that doesn't work here. 在其他情况下,我已经能够通过将三元语句作为值来有条件地设置属性,如下所示,但这在这里不起作用。
The problem with defaultChecked={radio.checked ? "checked" : ""}
defaultChecked={radio.checked ? "checked" : ""}
的问题defaultChecked={radio.checked ? "checked" : ""}
defaultChecked={radio.checked ? "checked" : ""}
is that even with the output becoming checked="checked"
on one radio button and checked
on the other, it makes both radio buttons checked by default, resulting in the last one actually being checked. defaultChecked={radio.checked ? "checked" : ""}
即使输出在一个单选按钮上被checked="checked"
在另一个单选按钮上checked
,它也会默认选中两个单选按钮,导致最后一个实际被检查。
Again, the component above works, but I'm hoping someone with some more experience with React will have a cleaner way of doing it rather than generating almost identical elements except for that attribute. 同样,上面的组件工作,但我希望有更多React经验的人将有一个更简洁的方法来做它而不是生成几乎相同的元素,除了该属性。
checked/defaultChecked take booleans, not strings. checked / defaultChecked取布尔值,而不是字符串。
<input className="__input"
type="radio"
name={self.props.radioset.name}
value={radio.value}
defaultChecked={radio.checked} />
Side note: avoid defaultChecked/defaultValue and use checked/value with onChange instead. 附注:避免使用defaultChecked / defaultValue并使用onChange选中checked / value。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.