React のドロップダウン-Select と onChange

1. React のカスタム選択コンポーネント
2. JSX の使用
3. react-select パッケージ

インタラクティブなアプリケーションを作成するには、React 開発者は入力要素を作成し、イベントを処理する必要があります。ドロップダウンフォームは広く普及しており、最も便利なタイプの入力の 1つです。これにより、ユーザーは多くのオプションの 1つを選択するか、デフォルトで 1つを選択することができます。オプションを選択すると、その値にアクセスしてコンポーネントの状態で保存できます。

select フォームの主な目的は、ユーザーのデータを収集することです。たとえば、ユーザーに性別を選択するように依頼したい場合があります。

イベントハンドラーの目的は、コンポーネントの状態を更新するためのユーザーのアクションを追跡することです。 <select/> 要素に関しては、onChange イベントハンドラーが最も便利です。これは、ユーザーが別の <option/> を選択したときに発生するためです。

React のカスタム選択コンポーネント

複雑な機能を備えた通常の <select/> 要素が必要な場合は、別のコンポーネントを作成するのがおそらく最善です。このようにして、イベントハンドラーを設定し、選択値を保存し、必要に応じて、親コンポーネントで変更をトリガーできます。props を使用して、データをカスタムの <select/> コンポーネントにフィードすることもできます。簡単な例を見てみましょう。

class CustomSelect extends Component {
  constructor(props){
    super(props)
    this.state = {
      selectedValue: ""
    }
  }
  render() {
    const handleChange = (e) => {
      this.setState({selectedValue: e.target.value})
    }
    return (
    <div>
    	<select onChange={(e) => handleChange(e)}>
    		<option value="1-10">1-10</option>
    		<option value="10-15">10-15</option>
    		<option value="15-20">15-20</option>
    		<option value="20+">20+</option>
   		</select>
    	<h1>You chose {this.state.selectedValue}</h1>
    </div>
    );
  }
}

これは、<select> 要素の主な機能をカプセル化する非常に基本的なコンポーネントです。ユーザーはオプションの 1つを選択でき、selectedValue 状態プロパティは選択した値を保存します。

change イベントは、その子ではなく、<select> 要素で発生することに注意してください。ユーザーには複数の選択肢があり、選択肢を変更するたびに、onChange 属性のイベントハンドラーが実行されて、コンポーネントの状態が更新されます。

状態が変化するたびに、コンポーネントは再レンダリングされ、更新された値を <h1> テキストで表示します。プレイコードで試してみてください。

オプションの配列のレンダリング

多くの場合、コンポーネントは、props を介して渡されたデータに基づいて出力を調整する場合にはるかに便利です。この例では、<select> 要素のコア機能を組み込んだカスタムコンポーネントがあります。ただし、JSX コードにハードコードされたオプションのセットがあると、カスタムコンポーネントを作成する目的が失われます。props を介して一連のオプションを受け入れ、それに応じてオプションをレンダリングする方がはるかに実用的です。次に例を示します。

class CustomSelect extends Component {
  constructor(props){
    super(props)
    this.state = {
      selectedValue: ""
    }
  }
  render() {
    const handleChange = (e) => {
      this.setState({selectedValue: e.target.value})
    }
    return (
    <div>
    <select onChange={(e) => handleChange(e)}>
    {this.props.options.map(arrayItem => <option value={arrayItem}>{arrayItem}</option>)}
    </select>
    <h1>You chose {this.state.selectedValue}</h1>
    </div>
    );
  }
}
CustomSelect.defaultProps = {
  options: ["1-10", "10-15", "15-20", "20+"]
}

このアプローチにより、<CustomSelect> コンポーネントをさまざまな方法でより自由に使用できるようになります。select 要素を複数回作成する場合は、オプション配列を props として渡すだけで済みます。例えば：

return (
    <div>
    ...
    <CustomSelect props=[firstArr]></CustomSelect>
    <CustomSelect props=[secondArr]></CustomSelect>
    ...
    </div>
    );

機能コンポーネント

これまでの例では、クラスコンポーネントのみを使用しています。関数を使用してカスタム選択コンポーネントを作成することもできます。実際、フックの導入以来、React 開発者は機能コンポーネントを強く支持し始めています。関数型コンポーネントとクラスコンポーネントの違いの詳細については、このガイドをお読みください。

JSX の使用

<select> を 1 回だけ使用する必要がある場合は、要素を JSX に直接含めることができます。ご存じない方のために説明すると、JSX は React の特別な構文であり、通常の HTML 構文によく似ていますが、開発者が動的アプリケーションを作成するためのより強力な機能を提供します。

JSX の実装は次のようになります。

class App extends Component {
  constructor(props){
    super(props)
    this.state = {
      selectedValue: ""
    }
  }
  render() {
    const handleChange = (e) => {
      this.setState({selectedValue: e.target.value})
    }
    return (
    <div>
        <p>Choose the size of the t-shirt</p>
    	<select onChange={(e) => handleChange(e)}>
    		<option value="S">S</option>
    		<option value="M">M</option>
    		<option value="L">L</option>
    		<option value="XL">XL</option>
   		</select>
    </div>
    );
  }
}

react-select パッケージ

高度なソリューションをお探しの場合は、オートコンプリートやマルチセレクトなどの広範な機能を備えたカスタム Select を提供する react-select パッケージのインストールを検討してください。機能をよりよく理解するために彼らのウェブサイトを見てください。