Question

我正在通过Meteor React教程。在下面的代码中，当我将<h1>标记更改为h2/h3/h4时，所有浏览器（chrome，ff，ie）中的复选框都变得无法点击（但<b>可用）。这是React或Meteor还是我的问题？

...
return (
  <div className="container">
  <header>
    <h1>Sample List</h1>  //changing to h2/h3/h4 makes checkbox unclickable

    <label className="hide-completed">
    <input
        type="checkbox"
        readOnly
        checked={this.state.hideCompleted}
        onClick={this.toggleHideCompleted.bind(this)}
        />
        Hide Completed Tasks
    </label>
    <form>...</form>
</header>
...

Answer 1

对我来说，这是通过在h1和标签之间插入“ br”来解决的。

<input
    type="checkbox"
    readOnly
    checked={this.state.hideCompleted}
    onClick={this.toggleHideCompleted.bind(this)}
    />
    Hide Completed Tasks
</label>

<br /> <!-- this one here-->

<form>...</form>

要找到答案，我在Chrome中使用了devTools。右键单击复选框，然后选择“检查元素”。您很可能会从下面选择。通过插入“ br”可以避免此问题，但这不是我认为的理想解决方案。

Answer 2

也许您需要更新样式/ CSS以反映正在使用的新标记：

//= require jquery
//= require jquery_ujs

Meteor + React

2 个答案: