Question

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

[video width="560" height="320" mp4="example.com/test.mp4" loop="true" autoplay="true" preload="auto"][/video]

复选框和文字显示效果很好，但是当我点击它时，它拒绝被检查。 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;的值已更改，但浏览器中的ui未更改。

有人可以告诉我，我失踪了吗？

Answer 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;

无法检查Reactjs复选框

1 个答案: