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错误。你应该怎么做才能做出反应？

编辑：

我忽略了提到复选框确实包含在三元组中

{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事件。除了在preventDefault处理程序中调用change之外，大多数情况下此操作都符合预期。即使preventDefault被切换，checked也会阻止浏览器直观地更新输入。这可以通过删除对preventDefault的调用，或将选中的切换放入setTimeout来解决。

总结一下，请勿在{{1}}组件方法中调用event.preventDefault()。

修改

在JSX中，以下语法意味着同样的事情。

this.onChange(event)

请参阅文档中的boolean attributes section。

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

1 个答案: