antdデザインカスタムアセンブリのMySelectとベースのコンポーネントを選択します

1、作成反応し、アプリ内の新しいプロジェクト私の-選択-デモ

2、エントリーファイルindex.js

インポートは、 '反応'からリアクト
からインポートReactDOMを '反応-DOM' 

からインポートアプリ './components/App.jsx' 

ReactDOM.render（ <APP />、のdocument.getElementById（ 'ルート'））

3、カスタムアセンブリMySelectと

　　MySelect.jsx

'が反応'からの輸入が反応
からインポート{行、選択を} 'antd' 

constのオプション = Select.Option 

輸出のデフォルトの 関数（小道具）{MySelectと
    のconst {名前、selectOptions、myRef、setSelectValue} = 小道具を
    しましょう{はdefaultValue} = 小道具
     // 没有传默认値值、选中第一个选项
    場合（！はdefaultValue &&（selectOptions && selectOptions.length> 0 ））{ 
        はdefaultValue = selectOptions [0 ] 
    } 
    戻りgetSelectItemを（名前、selectOptions、はdefaultValue、myRef、setSelectValue）
} 

/ * *
 戻り値選択ボックス*
 * @param {文字列}名フィールド名
 * @param {アレイ} selectOptions可供选择项
 * @param {文字列}はdefaultValue默认值
 * @param {関数} myRef组件的引用
 * @param {関数} setSelectValue获取的组件値を選択值
 * / 
機能getSelectItem（名前、selectOptions、はdefaultValue、myRef、setSelectValue）{ 

    リターン（
         <行> 
            <プレースホルダーを選択= { `$を{選択してください名}`}名= {名前}値= {はdefaultValue} REF = {myRef }にonSelect = {selectHandler}> 
                {selectOptions.map（項目 => {
                     リターン <オプション値= {アイテム}キー= {アイテム}選択= {アイテム===はdefaultValue}> {アイテム} </オプション>
                 }）}
            </ SELECT> 
        </ ROW>     ）関数selectHandler（値）{ 
        setSelectValue（値）
    } 
}

カスタムコンポーネントを使用する方法4、

　　App.jsx

「が反応」からのインポートが反応
インポート{ボタン、モーダル、アイコン、フォーム}から「antd」
インポート「antd / DIST / antd.css」。

インポートMySelectと './MySelect.jsx' 

エクスポートデフォルトクラスアプリケーションはReact.Component {延び
    コンストラクタ（小道具）{ 
        スーパー（小道具）
        この .state = { 
            [：配列 'AAA'、 'BBB'、 'CCC' ] 
        } 
    } 

    レンダリング（）{ 
        リターン（
             <DIV> 
                <ボタン型= "プライマリ"のonClick = { この .buttonClickHandler}>点击弹出对话框</ボタン>

 
    buttonClickHandler =（）=> { 
        Modal.confirm（{ 
            タイトル： 'オプション' 、
            アイコン： <アイコンタイプ= "先円" />、
            閉鎖可能：真、
            コンテンツ（
                 <フォームレイアウト= "水平"> 
                    { / * 设置了默认値值* / } 
                    { / * <MySelectとNAME = 'INSTRUMENT_ID' selectOptions = {this.state.array}はdefaultValue = 'BBB' 
                        myRef = {選択=> setSelectValue = {これをthis.mySelect =選択}。 setMySelectValue} />* / } 

                    { / *デフォルト値は、設定値ではない* / }
                     <MySelectと名= 'INSTRUMENT_ID' = {selectOptions この.state.array} 
                        Myref = {SELECT => この = {SELECT .mySelect setSelectValue =} この .setMySelectValue} /> 
                > </ Form1のを            ） 、
            okText： '確認' 、
            CancelText： 'Cannel' 、
            OnOK呼び出し：この.comfirmHandlerを
        }）
    } // 変化<MySelectと>ドロップダウン選択オプション更新されたコンポーネント値 
    setMySelectValue =値=> {
         この


    .mySelect.value = 値
    } 
    
    // this.mySelect.props.value保存的是默认的値值、読み取り専用 
    comfirmHandler =（）=> { 
        にconsole.log（ ` この .mySelect.value = $ { この.mySelect.value } `）
        はconsole.log（` この .mySelect.props.value = $ { この.mySelect.props.value} `）
         // 获取<MySelectと>下拉选择组件的値 
        mySelectValue = CONST この .mySelect.value？この .mySelect.value：この.mySelect.props.value 
        はconsole.log（ `mySelectValue = $ {mySelectValue}`）
    } 
}

5、効果

6、注意

　　1）this.select参照名.props.value格納された値は、読み取り専用、デフォルト値であります

　　値値2）更新オプション（デフォルト以外の値）は、その後、setMySelectValueで（）.VALUEでthis.select参照名を保存する場合

antdデザインカスタムアセンブリのMySelectとベースのコンポーネントを選択します

おすすめ