Reactチェックボックス同様のコンポーネントがAPIとしてどのように公開されるべきですか？

Question

私は基本的にチェックボックスのようなコンポーネントを構築していますが、カスタマイズされたデザインです。

私のコンポーネントは、私はMobxまたはReduxの状態管理のいずれかを使用することができるような状態を処理するための正しい方法だろう何

class App extends React.Component { 
 
\t constructor(props){ 
 
\t \t super(props); 
 
\t \t this.state = { 
 
\t \t \t checked: false 
 
\t \t }; 
 
\t } 
 
\t toggle(){ 
 
\t \t this.setState({ 
 
\t \t \t checked: !this.state.checked 
 
\t \t }); 
 
\t } 
 
\t render() { 
 
\t \t return (
 
\t \t \t <svg onClick={this.toggle.bind(this)}> 
 
\t \t \t <circle cx={50} cy={50} r={30} fill={this.state.checked ? "green" : "red"} /> 
 
\t \t \t </svg> 
 
\t \t) 
 
\t } 
 
} 
 
ReactDOM.render(<App />, document.getElementById('container'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 

 
<div id="container"> 
 
    <!-- This element's contents will be replaced with your component. --> 
 
</div>

のようなものですか？つまり、どのようにしてこのコンポーネントを状態管理に不可知論にし、状態をコンポーネントの外側から変更できるようにすることができますか？

Answer 1

React's form element APIをご覧ください。同様のアプローチがカスタムコンポーネントにとって妥当と思われます。

リアクトフォームの要素は、が2種類あり、とが制御されていませんです。

制御：コンポーネントはvalue財産とonChangeハンドラを公開します。独自の状態は処理しませんが、常にvalueによって決定される状態を表します。ユーザーがチェックボックスを切り替えると、変更ハンドラが呼び出され、それに応じてvalueプロパティを変更するのはラッピングコンポーネントのタスクになります。

制御されていない：成分もonChangeハンドラ、ないvalueプロパティを公開します。これは、独自の状態を処理し、基本的には、変更ハンドラを介して変更された状態についてラッピングコンポーネントに通知します。 initialValueプロパティを使用して初期値を渡します。

あなたのニーズに合ったアプローチは、ユースケースによって異なります。一般に、の制御コンポーネントが推奨されます。このコンポーネントがどのような状態を保持していない

import React from "react"; 

class ControlledCheckbox extends React.Component { 

    constructor(props) { 
     super(props); 

     this.onChange = this.onChange.bind(this); 
    } 

    onChange() { 
     if (this.props.onChange) { 
      this.props.onChange(!this.props.value); 
     } 
    } 

    render() { 
     return (
      <div onClick={this.onChange}> 
       {this.props.value ? "✓" : "✗"} 
      </div> 
     ); 
    } 

} 

注こと：

Answer 2

はTimoStaの答えにフォローアップ、私は彼が実装される可能性が示唆されているものかの簡単なデモを与えるために役立つだろうと思ったようまったく価値があり、イベントをバックアップするだけです。