Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

rhenan silverio

Dropdown select em ReactJS

Recommended Posts

Bem eu fiz um dropdown criando valores como Maior preço, menor preço etc... porém quando eu seleciono um dos dois ele não volta o valor e não trás o objeto que faz referencia.

 

import React, { PureComponent } from 'react'




class Dropdown extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {value: '4'};
    this.handleChange = this.handleChange.bind(this);
  }

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


  render() {
    const { itens, className} = this.props
    console.log(itens)
   //let x = event.target.value;
    return (
      <div className='select'>
        <select onChange={this.handleChange}  value={this.state.value}  className={className}  >
          {itens.map((item, i) =>
            <option  key={i} value={item.id}>{item.value} </option>

          )}
        </select>
      </div>
    )
  }
}
Dropdown.defaultProps = {
  className: 'select__filter'
};
export default Dropdown
import React, { PureComponent } from 'react'
import { Tab } from '../../../../components/Tabs/Tab'
import { Tabs } from '../../../../components/Tabs/Tabs'
import RestaurantCard from '../../../../components/RestaurantCard/index'
import Dropdown from '../Dropdown'
const SECTION = [
  
  {
    name: "Ver Restaurantes"
  },
  {
    name: "Ver Pratos"
  }
];

const dropdownItens = [{id: 'DISCOUNT', value: 'Melhores descontos'}, { id: 'BIGGER_PRICE', value: 'Maior Preço'}, {id: 'LOWER_PRICE', value: 'Menor Preço'}, {id: 'EVALUATION', value: 'Melhor Avaliado', selected: 'selected'}, {id: 'LOCATION', value: 'Mais Próximos'}]



class FilterTabs extends PureComponent {
  state = {
    value: '',
    id: ''
  } 

handleChange = (event) => {
    this.setState({ value: event.target.value });
    //this.setState({value: event.target.id});
  }





 render() {

    const { restaurants, size} = this.props;
    
    return (
      <section className="filter__tabs">
        <section className="container">
          <Tabs>
            {
              SECTION.map(section => (
                <Tab text={`${section.name} (${size})`} key={section.name}>
                  <section className="filter__tabs--info">
                    <span className="filter__tabs--info-text">
                      {`${size} restaurantes encontrados`}
                    </span>
                    <Dropdown  onChange={this.handleChange} itens={dropdownItens}/>
                  </section>

                  <div className="row">
                    {
                      restaurants.map(
                        restaurant => <RestaurantCard
                          key={restaurant.id}
                          extra={true}
                          data={restaurant} />
                      )
                    }
                  </div>
                </Tab>
              ))
            }
          </Tabs>
        </section>
      </section>
    )
  }
}

export default FilterTabs;

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

  • Conteúdo Similar

    • Por FabianoSouza
      Eu preciso exibir duas informações em minha consulta:
      1) A quantidade de pessoas inscritas numa turma de treinamento (isso é feito com um simples COUNT)
      2) Uma flag de excesso de inscrições na turma. Seria obtido pela comparação entre a quantidade máxima permitida (já existe esse campo) e o COUNT feito acima.
       
      Até aqui sem problemas.
       
      O que quero é evitar fazer duas contagens (1 para saber a quantidade de inscritos, e outra para gerar a flag de excesso de inscrições).
       
      Há uma forma de utilizar UMA contagem para atender as duas necessidades?
       
      Meu código está assim:
       
      ... --AQUI FAZ A COMPARAÇÃO PARA GERAR A FLAG DE EXCESSO DE INSCRIÇÕES , CASE WHEN (SELECT COUNT(*) FROM dbo.tab AS ITT WHERE ITT.codTurmaDeTreina = T.id) > T.lotacaoMax Then T.nome + '&nbsp;'+'<span class=%22icon-aviso fcolor-critico%22 style=%22font-size:18px%22 title=Excesso&nbsp;de&nbsp;inscrições></span>' --AQUI FAZ A CONTAGEM DE INSCRIÇÕES , (SELECT COUNT(*) FROM dbo.tab AS ITT WHERE ITT.codTurmaDeTreina = T.id) AS 'Inscrições'  
    • Por eiwes
      Eu tenho esse código, mas preciso retornar funções puras em vez de funções mutáveis.
       
      É possível? Talvez usando OOP? Não sei como melhorar isso.
       
      Tentei retornar os valores de cada função, mas não obtive sucesso.
       
      import { AssetStatusType } from '@domain/interfaces/common' import { BothComponentType, ComponentsType, GroupFiltersType, OperationType, OverviewModelType, PendenciesOverviewType, PendenciesType, StructurePendenciesCount, StructureStatusCount } from '../../types' const updateStatusCount = ( statusCount: StructureStatusCount, status: AssetStatusType ) => { statusCount[status] = (statusCount[status] || 0) + 1 } const updatePendenciesCount = ( pendenciesCount: StructurePendenciesCount, key: AssetStatusType, subKey: OperationType | PendenciesOverviewType ) => { pendenciesCount[key] = pendenciesCount[key] ?? {} pendenciesCount[key][subKey] = (pendenciesCount[key]?.[subKey] || 0) + 1 } const processOverviewPendencies = ( pendencies: PendenciesType[] | null | undefined, pendenciesCount: StructurePendenciesCount, countedIds: Set<string>, id: string ) => { if (pendencies?.length) { for (const { state, pendencyType } of pendencies) { const uniqueId = `${state}-${pendencyType}-${id}` if (!countedIds.has(uniqueId)) { updatePendenciesCount(pendenciesCount, state, pendencyType) countedIds.add(uniqueId) } } } } const processOverviewComponents = ( components: ComponentsType[], isGroupByTree: boolean, statusCount: StructureStatusCount, pendenciesCount: StructurePendenciesCount, countedIds: Set<string>, id: string, type: BothComponentType ) => { for (const { pendencies, status, operationType } of components) { if (isGroupByTree && type === 'location') { updateStatusCount(statusCount, status) if (operationType) { updatePendenciesCount(pendenciesCount, status, operationType) } } processOverviewPendencies(pendencies, pendenciesCount, countedIds, id) } } const processOverviewData = ( data: OverviewModelType[], groupBy: GroupFiltersType, statusCount: StructureStatusCount, pendenciesCount: StructurePendenciesCount, countedIds: Set<string> ) => { const isGroupByTree = groupBy === 'tree' const isGroupByAsset = groupBy === 'asset' for (const { id, status, components, operationType, type } of data) { if (isGroupByAsset || type === 'asset') { updateStatusCount(statusCount, status) if (operationType) { updatePendenciesCount(pendenciesCount, status, operationType) } } processOverviewComponents( components, isGroupByTree, statusCount, pendenciesCount, countedIds, id, type ) } } export const calculateOverviewCounts = ( data: OverviewModelType[], groupBy: GroupFiltersType ) => { const statusCount: StructureStatusCount = {} as StructureStatusCount const pendenciesCount: StructurePendenciesCount = {} as StructurePendenciesCount const countedIds = new Set<string>() processOverviewData(data, groupBy, statusCount, pendenciesCount, countedIds) return { ...statusCount, pendencies: pendenciesCount } } Existe uma maneira mais limpa e elegante de fazer isso? Preciso retornar um objeto como este:
      // calculateOverviewCounts return this { pendencies: StructurePendenciesCount; working: number; inAlert: number; warning: number; stopped: number; off: number; } StructurePendenciesCount é:

    • Por FabianoSouza
      Possuo uma coluna de data.
      Eu gostaria que os registros com datas futuras aparecessem no topo do meu select, em relação aos demais registros.
      Em seguida, gostaria que somente esses registros com datas futuras ficassem em ordem crescente.
      Algo como 
       
      João  | 16/11/2023
      Maria | 17/11/2023
      José  |  20/11/2023
       
      -----------------------------
      (demais registros da base)
      Antônio   |  20/05/2023
      Rosa        | 15/08/2023
      Cida         | 15/10/2022
      Pedro      |  20/05/2021
      Paulo      |  14/11/2020
       
      O select seria esse.
      select dbo.formataData(ET.dataInicial) AS 'data' FROM dbo.tab AS ET GROUP BY ET.dataInicial  
    • Por mateus.andriollo
      Existe uma forma de fazer um IF na select e comparar com Array de dados?
       
      algo como
       
      Select if( in_array(idCliente,'1,2,3,4,5')=true,'Tem','Não') ) as cliente Não consigo usar inner ou where pois esse array é algo q tem varias regras...
       
      Precisava saber se existe uma função assim em MySQL
    • Por mateus.andriollo
      Existe uma forma de fazer um IF na select e comparar com Array de dados?
       
      algo como
       
      Select if( in_array(idCliente,'1,2,3,4,5')=true,'Tem','Não') ) as cliente Não consigo usar inner ou where pois esse resultado do array é algo q tem varias regras...
       
      Precisava saber se existe uma função assim em MySQL
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.