概要

公式サイトにすでに解説がありますが、そこ扱われているサンプルソースがやや煩雑に感じました。なので、キーとなるポイントを抽出、分かりやすく短いソースで書いてみました。

この記事のサンプルソース概要

テキストボックスが2つあり、税抜きと税込みの価格を表示します。
いずれのテキストボックスも入力可能で、数字をタイプすると即時反映します。（税抜きのテキストボックスに入力すると税込みのテキストボックスに即反映される。逆も同様。）
同じコンポーネント(MyForm)を2つ配置してあり、入力値が他のテキストボックスに干渉しないことを確認できる。

作動イメージ

ソースコード

index.html

<!DOCTYPE html>
<html><head>
  <meta charset="UTF-8" />
</head>
<body>
  <div id="root"></div>
  <!-- Load React. -->
  <!-- Note: when deploying, replace "development.js" with "production.min.js". -->
  <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
  <script src="script.js"></script>
</body>
</html>

script.js

// 軽減税率(8%)
const taxrate = 0.08;

// テキストボックス
class MyInput extends React.Component {
    constructor(props) {
        super(props);
    }

    onChange(e) {
        // MyInputコンポーネントを配置したときの onValChange={...} に指定したメソッドがここで呼ばれる。
        this.props.onValChange(e.target.value);
    }
    render() {
        const value = this.props.value;
        return (
            <input
                type="text"
                value={value}
                onChange={(e) => this.onChange(e)}
            />);
    }
}

// 価格比較フォーム
class MyForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            value1: 0,
            value2: 0
        };
    }

    handleChange1(val) {
        this.setState({
            value1: val,
            value2: val * (1 + taxrate)
        });
    }

    handleChange2(val) {
        this.setState({
            value1: val / (1 + taxrate),
            value2: val
        });
    }

    render() {
        return (
            <div>
                税抜き
                <MyInput
                    name="taxout"
                    value={this.state.value1}
                    onValChange={(e) => this.handleChange1(e)} /><br />
                税込み
                <MyInput
                    name="taxin"
                    value={this.state.value2}
                    onValChange={(e) => this.handleChange2(e)} />(軽減税率)
            </div>
        );
    }
}

// 画面に表示
ReactDOM.render(
    <div>
        フォーム1
        <MyForm name="form1" /><br />
        フォーム2
        <MyForm name="form2" /><br />
    </div>,
    document.getElementById('root')
);

React - 2つのテキストボックスの入力を相互に反映する

概要

ソースコード