Jump to content
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;

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By FabianoSouza
      Estou usando SQL dinâmico num select. Até aqui tudo bem. Funciona.
       
      Agora preciso pegar alguns campos desse select e passar para variáveis.
      Na forma normal seria assim (isso funciona)
      SELECT @checkAcesso = COUNT(*), @contAcesso = campo2 FROM tab ... Estou tentando adaptar para conseguir isso acima, mas num SELECT dinâmico. Mas sem sucesso.
      SET @sql = 'SELECT ' SET @sql = @sql + @variavel + '= T.meuCampo ' SET @sql = @sql + ' FROM tabela AS T ' EXEC(@sql) Dessa forma simplesmente não exibe nada.
       
      Help!
    • By Wanderson Moreira
      bom dia, 

      preciso fazer um select e verificar se o ID do usuário logado existe em em uma coluna do banco de dados
      por exemplo

      ID Usuario: 6
      coluna do banco: 1, 3, 5, 16
       
      O problema é que se eu fizer o select com LIKE ele considera o numero 16 como 1 e 6 invés de considerar um numero só, com isso o usuário 6 acaba sendo incluso no select indevidamente
       
      alguém poderia me ajudar?
    • By neto_celino
      Estou usando o seguinte código para somar um SELECT, mas cheguei em um determinado ponto que travei.
       
      Tenho 400 registros na DB e tenho que somar alguns registros somente. Ou seja, somar o (valortotal) de alguns ID's somente. 
      É possivel e por onde vou ? rs.
      <?php $subtotal = "SELECT SUM(valortotal) from tbl_compras WHERE id = VariosIdAqui"; $resultado = mysql_query($subtotal); $registro = mysql_fetch_row($resultado); echo number_format($registro[0], 2, ',', ' ') ;  ?>      
    • By GabrielSCastro
      Olá pessoa, terminei a faculdade e recebi algumas propostas de projetos web, mas como ainda estou iniciando não tenho muita noção de quanto cobrar.
      Para um site, eu pensei em cobrar um valor razoável de entrada , e além deste valor, definir um contrato de um valor mensal para fazer manutenções necessárias, assim eu terei o cliente e uma renda sempre. Por outro lado, o cliente pode ficar com o site por pouco tempo e não chegar ao valor que eu gostaria pelo projeto. 
      Pensei também em cobrar por projeto, no minimo R$ 1000 por um site simples, já que to começando.

      Ai entra outro falta de experiência minha. Se eu cobrar por projeto, o cliente ficaria responsável por pagar o domínio e hospedagem dele ou eu contrataria uma hospedagem com a possibilidade de hospedar varios sites para quando eu tiver mais clientes.

      Indo mais direto ao ponto, gostaria que me ajudasse em como começar, cobrar, etc.

      Agradeço a quem puder ajudar.
    • By Giovanird
      Olá amigos!
      Tenha a seguinte estrutura no banco MySQL
      COD   |   PONTOX  |  PONTOY  |  ATLETAX       |  ATLETAY
      1         |   0               |  1               |  Maria              |  João
      2         |   2               |  0               |  João               |  Maria
      3         |   0               |  2               |  Maria              |  João
      4         |   7               |  5               |  Maria              |  João
      5         |   0               |  3               |  João               |  Maria
      6         |   2               |  1               |  João               |  Maria
      7         |   0               |  6               |  Maria              |  João
      8         |   4               |  0               |  João               |  Maria
       
      Preciso de ajuda para somar quantos pontos fez o atleta João nos últimos 5 torneios (COD 8, 7, 6, 5 e 4)  Há momento que o João jogou em X e outro momento em Y.
      Abaixo segue meu Select, onde a soma dos pontos deve ser 17.
       
      nomeatleta = "João"
      Set soma= banco.execute("SELECT sum(PONTOX ) AS somax,  sum(PONTOY ) AS somay FROM (select cod, pontox, pontoy, atletax, atletay  from torneios where (atletax like '"&nomeatleta&"' or atletay like '"&nomeatleta&"') order by cod desc limit 5) AS temp")
       
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.