reactインプリメンテーションラジオボックス、チェックボックス、ドロップダウンボックス

5454 ワード

react

reactとvueはすでに現在の先端開発分野の主流の枠組みである.確かに開発効率が大幅に向上した.博文vueでjs実装ラジオボックス、チェックボックス、およびドロップダウンボックスでは、vue実装フォームの基本原理を詳細に説明します.本稿ではreactを用いて同じ機能を実現する.
一、react開発テンプレート
reactを使用してWebページの開発を行い、その基本構造は以下の通りです.




    
    Title
    
    
    




 //todos

headセクションでは、3つの非常に重要なjsファイルが導入されています.その役割は次のとおりです.

react.js:Reactのコアライブラリ

react-dom.js:DOMに関する機能を提供する

browser.js:JSX構文からJavaScript構文への変換を実現する

もう1つの注目すべき点はbodyラベル内で、scriptラベルのtype属性がtext/babelに設定されていることです.これはreactのJSX構文がJavaScript構文と互換性がなく、JSX構文を使用する場所でtype属性を設定する必要があるためです.
二、react実現ラジオボックス
HTMLでは、一部のフォーム要素がユーザーの入力に基づいて属性値を更新します.一方、reactでは、これらの可変状態は通常、コンポーネントの状態属性に保持され、setState()メソッドでのみ更新されます.
reactを用いてラジオボックスを実現し、body部分のコードは以下の通りである.



    class FlavorForm extends React.Component {
        constructor(props) {
            super(props);
            this.state = {value: ''};
            this.handleChange = this.handleChange.bind(this);
        }

        handleChange(event) {
            this.setState({value: event.target.value});
        }

        render() {
            return (
                    <div>
                        <label > <input type="radio" name='gender' value="Man"
                                        onChange={this.handleChange}/>Man</label><br/>
                        <label > <input type="radio" name='gender' value="Women"
                                        onChange={this.handleChange}/>Women</label>
                        <div>gender: {this.state.value}</div>
                    </div>
            )
        }
    }
    ReactDOM.render(
            <FlavorForm/>,
        document.getElementById('root')
    )

以上のコードから,各inputタグのonChangeイベントを傍受し,対応する関数でコンポーネント状態を更新することが分かる.
三、複数選択ボックス
マルチ選択ボックスの実装は、ラジオボックスと同様に、各inputタグのonChangeイベントをリスニングすることによって実現することもできる.そのbody部分のラベルは以下の通りです.



    class CheckBox extends React.Component {
        constructor(props) {
            super(props);
            this.state = {value: []};
            this.handleChange = this.handleChange.bind(this);
        }
        handleChange(event) {
            let item = event.target.value;
            let items = this.state.value.slice();
            let index = items.indexOf(item);
            index === -1 ? items.push(item) : items.splice(index, 1);
            this.setState({value: items});
        }
        render() {
            return (
                    <div>
                        choose fruit：<br/>
                        <label><input type="checkbox" name="fruit" value="apple"
                                      onChange={this.handleChange}/>apple</label><br/>
                        <label><input type="checkbox" name="fruit" value="banana"
                                      onChange={this.handleChange}/>banana</label><br/>
                        <label><input type="checkbox" name="fruit" value="pear"
                                      onChange={this.handleChange}/>pear</label><br/>
                        <div>Chosen : {this.state.value.join('-')}</div>
                    </div>
            )
        }
    }
    ReactDOM.render(
            <CheckBox/>,
        document.getElementById('root')
    )

コードから、選択した情報を格納する配列であるコンポーネントステータスvalueを定義します.handleChange関数でvalueを更新する場合はsetState関数を使用する必要があります.そうしないと、コードは再レンダリングされず、選択したオプションがreturnに表示されてもリアルタイムで更新されません.
四、ドロップダウンボックス
ドロップダウン・ボックスの実装方法は、ラジオ・ボックス、チェック・ボックスと同様です.ここでは、body部分のコードを次のように直接例として説明します.



    class FlavorForm extends React.Component {
        constructor(props) {
            super(props);
            this.state = {value: 'basketball'};
            this.handleChange = this.handleChange.bind(this);
        }
        handleChange(event) {
            this.setState({value: event.target.value});
        }
        render() {
            return (
                    <div>
                        <label>choose favorite sports：
                            <select value={this.state.value} onChange={this.handleChange}>
                                <option value="running">running</option>
                                <option value="basketball">basketball</option>
                                <option value="skiing">skiing</option>
                            </select>
                        </label>
                        <div>chosen: {this.state.value}</div>
                    </div>
            )
        }
    }
    ReactDOM.render(
            <FlavorForm/>,
        document.getElementById('root')
    )

以上のコードでは、コンポーネントステータスvalueにデフォルト値が与えられ、returnのselectラベルで使用されます.これらはデフォルトで選択された機能を実現します.
要するに,reactによるフォーム実装の原理はすべて同じであり,選択情報を1つのコンポーネント状態で格納し,各inputタグのonChangeイベントを傍受する.応答関数でコンポーネントのステータスを更新します.

フィルターリスト

[伯俊10828]スタックPython