Enllaç de dades desplegable React

Bloc

Enllaç de dades desplegable React

La vinculació de dades desplegable sempre és interessant en diferents tecnologies d’interfície d’usuari. Primer de tot, introduïu la llista desplegable de valors de dades dinàmiques d'un servei web i, a continuació, deseu el valor seleccionat al nostre estat juntament amb una senzilla validació. Per tant, anem a provar això en reaccionar ...

Construirem un component desplegable de reacció que demana a l’usuari quin és l’equip de futbol favorit de la seva Premier League. Ja tenim una API web que ens proporciona els equips de futbol de la primera ministra a http://localhost:26854/api/premiershipteams.

Articles desplegables

Comencem per un component bàsic que té un teams al nostre estat disposats a mantenir els equips de la primera ministra. Tenim el componentDidMount mètode del cicle de vida preparat per fer la trucada del servei web per aconseguir els equips. També tenim el nostre select etiqueta html llesta per omplir-la amb una col·lecció d’elements.

class FavouriteTeam extends Component { state = { teams: [] }; componentDidMount() {} render() { return ( ); } }

Primer implementarem la trucada del servei web mitjançant fetch. Les dades es retornen des del servidor com una simple llista de cadenes. és a dir ['Arsenal','Bournemouth','Brighton and Hove Albion', ...].

Utilitzem array.map per produir una llista d'objectes que tinguin un value propietat (per al valor desplegable) i un display propietat (per mostrar el text al menú desplegable). és a dir [{'value': 'Arsenal', 'display': 'Arsenal'}, ...].

compte aol com canviar la contrasenya

Afegim un element en blanc al començament de la matriu mitjançant array.concat que demana a l'usuari que triï un equip. A continuació, la matriu concatenada es defineix a la matriu d'equips en l'estat del component.

componentDidMount() { fetch('http://localhost:26854/api/premiershipteams') .then((response) => { return response.json(); }) .then(data => { let teamsFromApi = data.map(team => { return {value: team, display: team} }); this.setState({ teams: [{value: '', display: '(Select your favourite team)'}].concat(teamsFromApi) }); }).catch(error => { console.log(error); }); }

Ara, ja que tenim els equips en l'estat component, podem assignar cada equip a un option etiqueta sense oblidar de construir un key atribut per mantenir la reacció feliç.

render() { return ( {this.state.teams.map((team) => {team.display})} ) }

Element seleccionat

És un bon començament. El següent és emmagatzemar l'element seleccionat a l'estat del component. Per tant, inicialitzem la propietat estatal perquè sigui l’element en blanc:

state = { teams: [], selectedTeam: '' };

Després hem de controlar el valor del select etiqueta i també defineix el selectedTeam propietat d’estat quan l’usuari selecciona un equip:

render() { return ( this.setState({selectedTeam: e.target.value})}> {this.state.teams.map((team) => {team.display})} ) }

Validació

Per últim, afegim algunes validacions per evitar que l'usuari seleccioni l'equip en blanc que és el primer element del teams matriu. Per tant, introduïm algun estat per a l'error de validació:

state = { teams: [], selectedTeam: '', validationError: '' };

Establirem el validationError state to Heu de seleccionar el vostre equip favorit si el valor seleccionat és una cadena en blanc. També mostrarem el validationError estat en text vermell:

render() { return ( this.setState({selectedTeam: e.target.value,validationError: e.target.value === '' ? 'You must select your favourite team' : ''})} > {this.state.teams.map((team) => {team.display})} {this.state.validationError} ) }

Conclusió

Això és! Implementar un menú desplegable en realitat es sent bastant natural en reaccionar. Aquí teniu el component final:

class FavouriteTeam extends Component { state = { teams: [], selectedTeam: '', validationError: '' }; componentDidMount() { fetch( 'http://localhost:26854/api/premiershipteams' ) .then(response => { return response.json(); }) .then(data => { let teamsFromApi = data.map(team => { return { value: team, display: team }; }); this.setState({ teams: [ { value: '', display: '(Select your favourite team)' } ].concat(teamsFromApi) }); }) .catch(error => { console.log(error); }); } render() { return ( this.setState({ selectedTeam: e.target.value, validationError: e.target.value === '' ? 'You must select your favourite team' : '' }) } > {this.state.teams.map(team => ( {team.display} ))} {this.state.validationError} ); } }

#reaccionar

www.carlrippon.com

Enllaç de dades desplegable React

La vinculació de dades desplegable sempre és interessant en diferents tecnologies d’interfície d’usuari. En primer lloc, introduïu la llista desplegable de valors de dades dinàmiques d'un servei web.