Reactjs复选框不能被选中

Reactjs checkbox cannot be checked

本文关键字：不能 复选框 Reactjs      更新时间：2023-09-26

我在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的值，而不是浏览器界面。

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

不建议修改props。试着用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;
相关文章：