在 React.js 中有条件地设置 html 属性
Conditionally setting html attributes in React.js
我在 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
选项生成几乎相同的代码。
组件的设置方式,我向它传递一个名称和要创建的无线电数组,并且对于无线电数组中的每个对象,使用该数据创建一个单选按钮。
在其他情况下,我已经能够通过将三元语句作为值来有条件地设置属性,如下所示,但这在这里不起作用。
defaultChecked={radio.checked ? "checked" : ""}
的问题在于,即使输出在一个单选按钮上变得checked="checked"
,在另一个单选按钮上变得checked
,它也会默认选中两个单选按钮,从而导致最后一个实际被选中。
同样,上面的组件有效,但我希望对 React 有更多经验的人能有一种更简洁的方法,而不是生成除了该属性之外几乎相同的元素。
选中/默认检查取布尔值,而不是字符串。
<input className="__input"
type="radio"
name={self.props.radioset.name}
value={radio.value}
defaultChecked={radio.checked} />
JSBIN演示
旁注:避免默认检查/默认值,而将选中/值与onChange一起使用。
相关文章:
- 如何设置html元素填充的动画
- 使用val()在jquery循环中设置html字符串的val
- 在 PHP 块中使用 Javascript 设置 HTML 文本框的值(使用 echo)
- JS for循环来设置HTML对象参数
- 使用JavaScript在select字段中使用optgroup设置html选项值
- 使用jQuery在select选项上设置HTML数据属性
- 设置html时的验证
- 如何从javascript中设置html表单的属性
- 如何使用Angular 2设置HTML选择值
- 设置 HTML 自定义属性与在 ID 属性中存储信息
- 无法通过javascript函数的自动计算设置html元素值
- 通过单选按钮状态设置HTML元素的可见性
- 通过参数设置html组合框的选定选项
- 使用javascript设置html页面的标题
- 如何从javascript设置html单选值
- 通过单独的js文件设置HTML值
- 我们如何使用Jquery和ASP.NET MVC 4复杂模型数据设置HTML元素的值
- 如何使用来自@Html.TextBoxFor的用户输入设置@Html.RadioButtonFor的值
- ckEditor插件iframe对话框设置html输入
- 如何从json中设置HTML选择选项