React双方向データバインディングの原理についての簡単な説明

React をインポートします。{ コンポーネント } から 'react' をインポートします。
// antd UI libraryimport { Button } from 'antd'; をインポートします。  
クラス Home は Component を拡張します {
    コンストラクタ(props) {
        スーパー(小道具);
        この状態 = { 
            入力値:''、
         };
    }   
    setValue=()=>{
        this.setState({
            inputVal: 「値の変更」
        })
    }
    与える（） {
        戻る （
            <div className="ホーム" >
                ホームコンポーネント<p> {this.state.inputVal}</p>
                 {/* antd UI ライブラリの使用*/
                <Button type="primary" onClick={this.setValue}>データの変更</Button>
            </div>
        );
    }
}
デフォルトのホームをエクスポートします。

React をインポートします。{ コンポーネント } から 'react' をインポートします。
import { Button } from 'antd'; // antd UI ライブラリクラス Home extends Component {
    コンストラクタ(props) {
        スーパー(小道具);
        この状態 = { 
            入力値:''、
         };

    }    
    変化 = (ev)=>{
        this.setState({
            入力値:ターゲット値
        })
    }
    与える（） {
        戻る （
            <div className="ホーム" >
                ホームコンポーネント <入力 
                    onChange={this.change}
                    // 値 = {this.state.inputVal}
                    デフォルト値={this.state.inputVal}
                    placeholder="テキストコンテンツを入力"
                 />
                <p>&emsp;{this.state.inputVal}</p>
            </div>
        );
    }
}
デフォルトのホームをエクスポートします。