React checkbox component

onChange, onBeforeChange, Promise

by xx7y7xx

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://npmcdn.com/react@latest/dist/react-with-addons.js"></script>
<script src="https://npmcdn.com/react-dom@latest/dist/react-dom.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

<div id="container">
  <!-- This element's contents will be replaced with your component. -->
</div>

JavaScript 1.7

var ConfirmDialog = React.createClass({
	handleYes: function() {
  
  },
  handleNo: function() {
  
  },
	render: function() {
  	return (
    	<div>
      	<p>Are you sure to select this checkbox?</p>
      	<button onClick={this.handleYes}>Yes</button>
        {' '}
        <button onClick={this.handleNo}>No</button>
      </div>
    );
  }
});

var CheckBox = React.createClass({
  propTypes: {
    onBeforeChange: React.PropTypes.func,
    onChange: React.PropTypes.func
  },
  getInitialState: function() {
    return { value: false };
  },
	handleChange: function(event) {
  	const { checked } = event.target;
    Promise
    	.resolve(this.props.onBeforeChange(checked))
      .then((result) => {
        if (result === true) {
          this.props.onChange(checked);
          this.setState({ value: checked })
        }
      })
  },
	render: function() {
  	return (
    	<div>
      	<input
        	type="checkbox"
          checked={this.state.value}
          onChange={this.handleChange}
        />
      </div>
    );
  }
});

var Hello = React.createClass({
	handleBeforeChange: function(checked) {
  	if (checked !== true) {
    	// 取消勾选的时候不再进行检查
    	return true;
    }
    // let result = confirm("Are you sure to select this checkbox?");
    let promiseResult = new Promise((resolve, reject) => {
      setTimeout(function(){
        resolve(true); // Yay! Everything went well!
      }, 2000);
    });
    return promiseResult;
  },
	handleChange: function(checked) {
  	// alert(checked);
  },
  render: function() {
    return (
    	<div>
      	<h1>Hello {this.props.name}?</h1>
        <p>Click on checkbox, then after 2s will be checked.</p>
        <CheckBox
        	onBeforeChange={this.handleBeforeChange}
        	onChange={this.handleChange}
        />
        <hr />
        <ConfirmDialog />
      </div>
    );
  }
});

ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('container')
);