gouf
5/4/2015 - 3:04 PM

ラジオボタンの選択値を取得して値段を計算

ラジオボタンの選択値を取得して値段を計算

script.js
content_copyfile_download
// Ref:
// * [[js] このコードをもっと簡単にかけませんか？(9403)｜teratail](https://teratail.com/questions/9403)

var dataA = [
  {
    name: '青',
    value: 100
  },
  {
    name: '赤',
    value: 200
  },
  {
    name: '緑',
    value: 300
  },
];

var dataB = [
  {
    name: '金',
    value: 100
  },
  {
    name: '銀',
    value: 200
  },
  {
    name: '銅',
    value: 300
  },
];


var Component = React.createClass({
  getInitialState: function () {
    return {
      resultText: 0
    };
  },
  renderCalc: function () {
    // フォームごとの選択値を取得して その積を計算
    var product = Object.keys(this.refs).map(function (key) {
      return this.refs[key].state.checkedValue;
    }, this).reduce(function (x, y) { return x * y; });

    this.setState({
      resultText: product
    })
  },
  render: function () {
    // memo:
    // <div onChange={this.renderCalc}>
    // と記述すればラジオボタンの選択ごとに値段の計算が実施される
    return (
      <div>
        <Form id="a" data={dataA} checkedValue="100" name="cable" ref="formA"/>
        <Form id="b" data={dataB} checkedValue="100" name="connect" ref="formB"/>
        <input type="button" value="click" onClick={this.renderCalc}/>
        <ResultText value={this.state.resultText}/>
      </div>
    )
  }
});

var Form = React.createClass({
  getInitialState: function () {
    return {
      checkedValue: this.props.checkedValue
    }
  },
  handleChange: function (e) {
    this.setState({
      checkedValue: e.currentTarget.value
    })
  },
  render: function () {
    // 選択されたラジオボタンの値をstate として設定
    // 加えてチェック状態の更新
    var radioButtons = this.props.data.map(function (d) {
      return <input
        type="radio"
        name={this.props.name}
        value={d.value}
        key={d.name}
        onChange={this.handleChange}
        checked={d.value.toString() === this.state.checkedValue}>
          {d.name}
        </input>
    }, this);

    return (
      <form id={this.props.id}>
        {radioButtons}
      </form>
    );
  }
});

var ResultText = React.createClass({
  getDefaultProps: function () {
    return {
      value: 0
    };
  },
  render: function () {
    if (this.props.value === 0) {
      return (
        <p>ここに値段が表示されます</p>
      )
    }

    return (
      <p>
        料金は{this.props.value}円です。
      </p>
    );
  }
});

React.render(<Component/>, document.getElementById('component'));
index.html
content_copyfile_download
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <script src="http://fb.me/react-0.13.1.js"></script>
  <script src="http://fb.me/JSXTransformer-0.13.1.js"></script>
  <script type="text/jsx" src="script.js"></script>
</head>
<body>
  <div id="component"></div>
</body>
</html>