无法选中 Reactjs 复选框答案

【问题标题】：Reactjs checkbox cannot be checked无法选中 Reactjs 复选框
【发布时间】：2016-10-07 23:47:05
【问题描述】：

我在 Reactjs 中有这段代码，它显示带有复选框的标签

import React, { Component, PropTypes } from 'react';


class Test extends Component {
  constructor() {
      super(...arguments);
  }

  checkboxClicked(e) {
      this.props.test.clicked = e.target.checked;
  }

  render() {
    return (
        <li>
            <label>

                <input type="checkbox" value={this.props.test.id} checked={this.props.test.clicked} onChange={this.checkboxClicked.bind(this)} />
                {this.props.test.text}

            </label>
        </li>
    );
  }
}

export default Test;

复选框和文本显示良好，但是当我单击它时，它拒绝被选中。 this.props.test.clicked的值改变了，但浏览器的ui没有改变。

有人能告诉我我失踪了吗？

【问题讨论】：

你能提供一个重现问题的活生生的例子吗？
这里是一个活生生的例子jsfiddle.net/2kctv533
组件永远不会重新渲染，因为状态永远不会改变。使用状态，而不是道具。
@AndrewL.这可能不是正确的方法，但是在父组件中，我使用道具值来查找选中了哪个复选框...在您的方法中，我怎么知道检查了哪个测试？

标签： javascript reactjs checkbox

【解决方案1】：

不建议更换道具。尝试改用state。

import React, { Component, PropTypes } from 'react';


class Test extends Component {
  constructor() {
      super(...arguments);

      this.state = { checked: this.props.test.clicked };
  }

  checkboxClicked(e) {
      this.setState({checked : e.target.checked});
  }

  render() {
    return (
        <li>
            <label>

                <input type="checkbox" value={this.props.test.id} checked={this.state.checked} onChange={this.checkboxClicked.bind(this)} />
                {this.props.test.text}

            </label>
        </li>
    );
  }
}

export default Test;

【讨论】：

这可能不是正确的方法，但是在父组件中，我使用 props 值来查找选中了哪个复选框...在您的方法中，我怎么知道哪个 Test 是检查了吗？
你能告诉我你的父母组件需要测试这些复选框是否被选中吗？