giautm/react-example.html

## react-example.html
<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title>Basic Example with JSX</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/components/input.css"/>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/components/table.css"/>
  </head>
  <body>
  <div class="ui one column doubling stackable grid container">
    <div class="column">
      <h1 class="ui header">Basic Example with JSX</h1>
      <div id="demo"></div>
    </div>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>
  <script type="text/babel">
    function BarcodeInput(props) {
      let input = null;
      let handleSubmit = (event) => {
        event.preventDefault();
        props.onInput((input.value || '').trim());
        if (props.clearInput || props.strictMode) {
          input.value = null;
        } else {
          input.select();
        }
      }
      let stopEvent = props.strictMode ? (e) => e.preventDefault() : null;

      return (<form onSubmit={handleSubmit}>
        <input type='text' className={props.className} placeholder={props.placeholder} autoFocus={props.autoFocus}
          onCut={stopEvent} onCopy={stopEvent} onPaste={stopEvent}
          onClick={(e) => e.target.select()} ref={(ref) => input = ref}/></form>);
    }

    class InventoryInput extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          products: {}
        };
      }

      handleNewProduct(barcode) {
        let newState = Object.assign({}, this.state);
        if (newState.products[barcode]) {
          newState.products[barcode].qty++;
        } else {
          newState.products[barcode] = {
            barcode, name: 'Tên SP', qty: 1
          };
        }

        this.setState(newState);
      }

      clear() {
        if (confirm('Xoá những sản phẩm đã nhập?')) {
          this.setState({products: {}});
        }
      }

      handleSubmit(event) {
        if (!confirm('Xác nhận nhập kho những sản phẩm đã nhập?')) {
          event.preventDefault();
        }
      }

      render() {
        let rows = Object.keys(this.state.products).map((key) => {
          const p = this.state.products[key];
          return (
          <tr key={p.barcode}>
            <td>{p.barcode}<input type="hidden" value={p.barcode} name="barcode"/></td>
            <td><div className="ui input mini fluid"><input type="text" defaultValue={p.name} name="name"/></div></td>
            <td>{p.qty}<input type="hidden" value={p.qty} name="qty"/></td>
          </tr>);
        });

        return (
          <div>
            <div className="ui icon input">
              <BarcodeInput placeholder={'Nhập mã sản phẩm'} autoFocus strictMode clearInput
                  onInput={this.handleNewProduct.bind(this)}/>
              <i className="icon barcode"></i>
            </div>
            <form onSubmit={this.handleSubmit.bind(this)}>
              <table className="ui fixed single line celled inverted table" style={{marginTop: '20px'}}>
                <thead>
                <tr>
                  <th colSpan="3">
                    <button className="ui button small primary" type="submit">
                      <i className="icon save"></i>Lưu</button>
                    <button className="ui button small" type="button" onClick={this.clear.bind(this)}>
                      <i className="icon cancel"></i>Huỷ bỏ</button>
                  </th>
                  </tr>
                  <tr><th>Mã SP</th>
                  <th>Tên sản phẩm</th>
                  <th>Số lượng nhập</th>
                </tr></thead>
                <tbody>{rows}</tbody>
              </table>
            </form>
          </div>);
      }
    }

    ReactDOM.render(<InventoryInput/>, document.getElementById('demo'));
  </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Basic Example with JSX</title>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.css" />
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/components/input.css"/>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/components/table.css"/>
	</head>
	<body>
	<div class="ui one column doubling stackable grid container">
	<div class="column">
	<h1 class="ui header">Basic Example with JSX</h1>
	<div id="demo"></div>
	</div>
	</div>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>
	<script type="text/babel">
	function BarcodeInput(props) {
	let input = null;
	let handleSubmit = (event) => {
	event.preventDefault();
	props.onInput((input.value \|\| '').trim());
	if (props.clearInput \|\| props.strictMode) {
	input.value = null;
	} else {
	input.select();
	}
	}
	let stopEvent = props.strictMode ? (e) => e.preventDefault() : null;

	return (<form onSubmit={handleSubmit}>
	<input type='text' className={props.className} placeholder={props.placeholder} autoFocus={props.autoFocus}
	onCut={stopEvent} onCopy={stopEvent} onPaste={stopEvent}
	onClick={(e) => e.target.select()} ref={(ref) => input = ref}/></form>);
	}

	class InventoryInput extends React.Component {
	constructor(props) {
	super(props);
	this.state = {
	products: {}
	};
	}

	handleNewProduct(barcode) {
	let newState = Object.assign({}, this.state);
	if (newState.products[barcode]) {
	newState.products[barcode].qty++;
	} else {
	newState.products[barcode] = {
	barcode, name: 'Tên SP', qty: 1
	};
	}

	this.setState(newState);
	}

	clear() {
	if (confirm('Xoá những sản phẩm đã nhập?')) {
	this.setState({products: {}});
	}
	}

	handleSubmit(event) {
	if (!confirm('Xác nhận nhập kho những sản phẩm đã nhập?')) {
	event.preventDefault();
	}
	}

	render() {
	let rows = Object.keys(this.state.products).map((key) => {
	const p = this.state.products[key];
	return (
	<tr key={p.barcode}>
	<td>{p.barcode}<input type="hidden" value={p.barcode} name="barcode"/></td>
	<td><div className="ui input mini fluid"><input type="text" defaultValue={p.name} name="name"/></div></td>
	<td>{p.qty}<input type="hidden" value={p.qty} name="qty"/></td>
	</tr>);
	});

	return (
	<div>
	<div className="ui icon input">
	<BarcodeInput placeholder={'Nhập mã sản phẩm'} autoFocus strictMode clearInput
	onInput={this.handleNewProduct.bind(this)}/>
	<i className="icon barcode"></i>
	</div>
	<form onSubmit={this.handleSubmit.bind(this)}>
	<table className="ui fixed single line celled inverted table" style={{marginTop: '20px'}}>
	<thead>
	<tr>
	<th colSpan="3">
	<button className="ui button small primary" type="submit">
	<i className="icon save"></i>Lưu</button>
	<button className="ui button small" type="button" onClick={this.clear.bind(this)}>
	<i className="icon cancel"></i>Huỷ bỏ</button>
	</th>
	</tr>
	<tr><th>Mã SP</th>
	<th>Tên sản phẩm</th>
	<th>Số lượng nhập</th>
	</tr></thead>
	<tbody>{rows}</tbody>
	</table>
	</form>
	</div>);
	}
	}

	ReactDOM.render(<InventoryInput/>, document.getElementById('demo'));
	</script>
	</body>
	</html>