Как создать повторно используемый список выбора в React

В этом руководстве показано, как создать повторно используемый компонент раскрывающегося списка в React. Я разбил функциональность на два компонента — фактический компонент раскрывающегося списка выбора и вызывающий родительский/вызывающий компонент.

Родительским компонентом будет App.js, а компонент DynamicSelect.js будет обрабатывать функциональность списка выбора. Весь исходный код проекта находится на GitHub.

Начнем с компонента DynamicSelect. Компонент DynamicSelect — это компонент, который будет отображать массив символов Seinfeld в списке выбора и передавать выбранное значение через объект реквизита родительскому компоненту. Когда событие onChange запускается для списка выбора, событие передается в функцию handleChange. Эта функция передаст выбранное значение обратно родительскому элементу (App.js) через объект реквизита.

Компонент DynamicSelect.js

import React, {Component} from 'react'; class DynamicSelect extends Component{ constructor(props){ super(props) } //On the change event for the select box pass the selected value back to the parent handleChange = (event) => { let selectedValue = event.target.value; this.props.onSelectChange(selectedValue); } render(){ let arrayOfData = this.props.arrayOfData; let options = arrayOfData.map((data) => <option key={data.id} value={data.id} > {data.name} </option> ); return ( <select name="customSearch" className="custom-search-select" onChange={this.handleChange}> <option>Select Item</option> {options} </select> ) } } export default DynamicSelect;

Компонент App.js

import React, { Component } from 'react'; import logo from './logo.svg'; import './App.css'; import DynamicSelect from './DynamicSelect'; const arrayOfData = [ { id: '1 - Jerry', name: 'Jerry' }, { id: '2 - Elaine', name: 'Elaine' }, { id: '3 - Kramer', name: 'Kramer' }, { id: '4 - George', name: 'George' }, ]; class App extends Component { constructor(props){ super(props) this.state={ selectedValue: 'Nothing selected' } } handleSelectChange = (selectedValue) =>{ this.setState({ selectedValue: selectedValue }); } render() { return ( <div className="App"> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <h1 className="App-title">Dynamic Select Dropdown List</h1> </header> <p className="App-intro"> <DynamicSelect arrayOfData={arrayOfData} onSelectChange={this.handleSelectChange} /> <br /><br /> <div> Selected value: {this.state.selectedValue} </div> </p> </div> ); } } export default App;

И это все. Репозиторий этого кода доступен на GitHub в этом классе. Эту функциональность также можно легко воспроизвести с помощью функциональных компонентов с хуками.

Первоначально опубликовано на https://clintmcmahon.com 19 июля 2020 г.