Reactjs：组件的 Jsx 三元内联（嵌套三元）

Question

我有一个 react-bootstrap <Checkbox >。

看起来像这样：

<Checkbox inline onClick={this.handleInclude}> Include </Checkbox>

在某些情况下，我希望选中复选框。如果您想要检查，该 api 建议执行以下操作：

<Checkbox checked inline onClick={this.handleInclude}> Include </Checkbox>

所以现在我只想在某些状态下使用checked 关键字。所以我尝试使用三元语句：

<Checkbox 
  {this.state.chkbox === true ? "checked" : "" } 
  inline 
  onClick={this.handleInclude}> 
     Include
 </Checkbox>

但这会引发Unexpected token 错误。你应该如何用 react 来做到这一点？

编辑：

我没有提到该复选框确实包含在三元组中

{this.state.currentView == "timeline" ?
         <Checkbox 
      {this.state.chkbox === true ? "checked" : "" } 
      inline 
      onClick={this.handleInclude}> 
         Include
     </Checkbox>
: "" 
}

在三元运算符中使用内部 { } 标记时出现 JSX 令牌错误。

Answer 1

React 使用 checked 属性处理布尔值 form inputs。

<input type={"checkbox"} checked={true} />
<input type={"checkbox"} checked={false} />

组件应侦听onChange 事件，尤其是当它是受控表单输入时。

<input type={"checkbox"} checked={this.state.checked} onChange={this.onChange} />

另外，请注意：

请注意，为了规范复选框和单选输入的更改处理，React 使用click 事件代替change 事件。在大多数情况下，它的行为符合预期，除非在 change 处理程序中调用 preventDefault。 preventDefault 阻止浏览器在视觉上更新输入，即使 checked 被切换。这可以通过删除对preventDefault 的调用或将选中的切换置于setTimeout 中来解决。

总而言之，不要在this.onChange(event) 组件方法中调用event.preventDefault()。

---

编辑

在 JSX 中，以下语法含义相同。

<input checked />
<input checked={true} />

请参阅文档中的boolean attributes section。