React

by hira3

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://unpkg.com/react@15.3.2/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15.3.2/dist/react-dom.js"></script>
<H1>React</H1>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

<div id="container"></div>

CSS

body { font-family: arial; font-size: 14px; }
.readout { width: 45%; float: right; }
.readout td { width: 50%; }
tr { vertical-align: top }
td { padding: 0.2em 0.2em 0.6em 0.2em; }
td.label { text-align: right; padding-right: 0.5em; }
input[type=radio] { margin: 0 0.25em 0 0.25em }

JavaScript 1.7

var ViewForm = React.createClass({
  render: function() {
    return (
	      <div className="readout">
      		<h3>Form の値</h3>
          <table>
            <tr>
              <td className="label">テキスト値:</td>
              <td>{this.props.data.stringValue}</td>
            </tr>
            <tr>
              <td className="label">パスワード:</td>
              <td>{this.props.data.passwordValue}</td>
            </tr>
            <tr>
              <td className="label">真偽値:</td>
              <td>{this.props.data.booleanValue.toString()}</td>
            </tr>
            <tr>
              <td className="label">選択された値:</td>
              <td>{this.props.data.selectedOptionValue}</td>
            </tr>
            <tr>
              <td className="label">選択された値 (複数選択):</td>
              <td>{this.props.data.multipleSelectedOptionValues.toString()}</td>
            </tr>
            <tr>
              <td className="label">ラジオボタンの選択された値:</td>
              <td>{this.props.data.radioSelectedOptionValue}</td>
            </tr>
          </table>
        </div>
    );
	}
});

var InputText = React.createClass({
  handleValueChange: function(e) {
    this.props.onChange(e.target.value);
  },
  render: function() {
    return (
          <tr>
            <td className="label">テキスト値 (タイプ時に更新):</td>
            <td>
            	<input value={this.props.value}
            			onChange={this.handleValueChange} />
            </td>
          </tr>
		);
  }
});

var InputTextArea = React.createClass({
  handleValueChange: function(e) {
    this.props.onChange(e.target.value);
  },
  render: function() {
    return (
          <tr>
            <td className="label">テキスト値 (複数行):</td>
            <td>
                <textarea value={this.props.value}
            			onChange={this.handleValueChange}> </textarea>
            </td>
          </tr>
		);
  }
});

var InputPassword = React.createClass({
  handleValueChange: function(e) {
    this.props.onChange(e.target.value);
 ...