reactインプリメンテーションラジオボックス、チェックボックス、ドロップダウンボックス
5454 ワード
reactとvueはすでに現在の先端開発分野の主流の枠組みである.確かに開発効率が大幅に向上した.博文vueでjs実装ラジオボックス、チェックボックス、およびドロップダウンボックスでは、vue実装フォームの基本原理を詳細に説明します.本稿ではreactを用いて同じ機能を実現する.
一、react開発テンプレート
reactを使用してWebページの開発を行い、その基本構造は以下の通りです.
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部分のコードは以下の通りである.
以上のコードから,各inputタグのonChangeイベントを傍受し,対応する関数でコンポーネント状態を更新することが分かる.
三、複数選択ボックス
マルチ選択ボックスの実装は、ラジオボックスと同様に、各inputタグのonChangeイベントをリスニングすることによって実現することもできる.そのbody部分のラベルは以下の通りです.
コードから、選択した情報を格納する配列であるコンポーネントステータスvalueを定義します.handleChange関数でvalueを更新する場合はsetState関数を使用する必要があります.そうしないと、コードは再レンダリングされず、選択したオプションがreturnに表示されてもリアルタイムで更新されません.
四、ドロップダウンボックス
ドロップダウン・ボックスの実装方法は、ラジオ・ボックス、チェック・ボックスと同様です.ここでは、body部分のコードを次のように直接例として説明します.
以上のコードでは、コンポーネントステータスvalueにデフォルト値が与えられ、returnのselectラベルで使用されます.これらはデフォルトで選択された機能を実現します.
要するに,reactによるフォーム実装の原理はすべて同じであり,選択情報を1つのコンポーネント状態で格納し,各inputタグのonChangeイベントを傍受する.応答関数でコンポーネントのステータスを更新します.
一、react開発テンプレート
reactを使用してWebページの開発を行い、その基本構造は以下の通りです.
Title
//todos
headセクションでは、3つの非常に重要なjsファイルが導入されています.その役割は次のとおりです.
二、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イベントを傍受する.応答関数でコンポーネントのステータスを更新します.