如何在 reactjs 中使用 'linkState' 显示复选框的状态？

Question

我想将 linkState 用于复选框，但我发现无法恢复状态并显示它：

var Item = React.createClass({
  mixins: [React.addons.LinkedStateMixin],
  getInitialState: function() {
    return {
      ok: true
    }
  },
  render: function() {
     return (
     <div>
       <input type="checkbox" checkedLink={this.linkState('ok')} />
       Is it OK: [{this.state.ok}]
       </div>
     )
  }
});
React.render(<Item />, document.body);

关键行是：

Is it OK: [{this.state.ok}]

但是没有显示状态。用this.state.ok来显示是否正确？

现场演示：http://jsbin.com/detese/2/edit

Answer 1

您的主要代码是正确的，实际问题在于您调试代码的方式。

<div>{true}</div> 呈现为 <div>true</div>
<div>{false}</div> 呈现为 <div></div>

为了将状态放入组件的渲染中，我使用了这个片段：

<pre>{JSON.stringify(this.state, null, 4)}</pre>

jsbin

如果您有一个布尔值并想要呈现字符串表示，请执行 String(thatBoolean)。 React 将始终完全按照您的指示呈现您的字符串，但非字符串值有很多边缘情况。

如何在 reactjs 中使用 'linkState' 显示复选框的状态？

How to show the state of a checkbox with used 'linkState' in reactjs?

reactjs