Como definir um valor padrão em react-select


86

Eu tenho um problema ao usar o react-select. Eu uso redux form e tornei meu componente react-select compatível com redux form. Aqui está o código:

const MySelect = props => (
    <Select
        {...props}
        value={props.input.value}
        onChange={value => props.input.onChange(value)}
        onBlur={() => props.input.onBlur(props.input.value)}
        options={props.options}
        placeholder={props.placeholder}
        selectedValue={props.selectedValue}
    />
);

e aqui como eu o renderizo:

<div className="select-box__container">
    <Field
    id="side"
    name="side"
    component={SelectInput}
    options={sideOptions}
    clearable={false}
    placeholder="Select Side"
    selectedValue={label: 'Any', value: 'Any'}
    />
</div>

Mas o problema é que minha lista suspensa não tem um valor padrão como desejo. O que estou fazendo de errado? Alguma ideia?


isso está correto: value = {props.input.value}. qual é o problema que você está enfrentando?
Ved

Meu problema é que eu quero que meu select tenha um defaultValue quando eu renderizá-lo pela primeira vez, mas não consigo
user7334203

1
qual é o valor de props.input.value quando ele é renderizado primeiro?
Ved

Esse é meu problema. Como configurá-lo para ter um valor padrão?
user7334203

que valor voce quer?
Ved

Respostas:


62

Eu acho que você precisa de algo assim:

const MySelect = props => (
<Select
    {...props}
    value={props.options.filter(option => option.label === 'Some label')}
    onChange={value => props.input.onChange(value)}
    onBlur={() => props.input.onBlur(props.input.value)}
    options={props.options}
    placeholder={props.placeholder}
  />
);

5
O ponto de ligação com redux / react é para que a interface do usuário reflita o valor do objeto em tempo real. essa abordagem desacopla essa ligação. Considere definir o valor padrão no redutor.
Joseph Juhnke

2
@JosephJuhnke verifique a pergunta primeiro. É como definir o valor padrão.
Ved de

5
selectedValuefoi alterado para value. Verifique os documentos react-select.com/props
transang de

9
Existe um defaultValuecampo agora na nova versão.
Hongbo Miao

3
o complicado é que você precisa definir o objeto selecionado para o campo 'defaultValue', em vez do valor das opções. por exemplo, 0,1,2
andyCao 01 de

46

Eu usei o parâmetro defaultValue, abaixo está o código de como eu alcancei um valor padrão, bem como atualizo o valor padrão quando uma opção é selecionada no menu suspenso.

<Select
  name="form-dept-select"
  options={depts}
  defaultValue={{ label: "Select Dept", value: 0 }}
  onChange={e => {
              this.setState({
              department: e.label,
              deptId: e.value
              });
           }}
/>

8
Obrigado, agora eu sei que defaultValue leva o objeto em vez de apenas o valor.
Dennis Liu

1
Não, de acordo com os documentos do React ou intelisense, não: reactjs.org/docs/uncontrolled-components.html#default-values
Alex

38

Se você veio aqui para reagir-select v2, e ainda tendo problemas - versão 2 agora só aceita um objeto como value, defaultValue, etc.

Ou seja, tente usar value={{value: 'one', label: 'One'}}, em vez de apenas value={'one'}.


Muito obrigado
Johnny Bigoode

incompleto. se você definir o valor para isso, não poderá mais alterar o valor
Toskan

@Toskan - sim, este é um dos princípios do ReactJS e vinculação de dados unilateral, e afeta todos os elementos do formulário, não apenas esta biblioteca. Você precisa lidar com a mudança sozinho, sem reagir, se optar por ter um componente controlado. Esta resposta fala sobre isso e
direciona

ok, muito justo, então qual problema sua solução resolve? isto é, codificar um valor?
Toskan

O caso {value: 'one', label: 'One'}dado aqui é apenas um exemplo. Em sua aplicação, isso seria uma variável / prop com uma estrutura idêntica.
eedrah

13

Eu estava tendo um erro semelhante. Certifique-se de que suas opções tenham um atributo de valor.

<option key={index} value={item}> {item} </option>

Em seguida, combine o valor do elemento selects inicialmente com o valor das opções.

<select 
    value={this.value} />

Acho que essa é a melhor / mais elegante solução. Estou certo em pensar isso?
user2026178

o valor não mudará se o fizer, você deve escrever a função onChange para definir a mudança
raghul

1
Isso é para um elemento <select> de HTML vanilla, não um <Select> de seleção de reação, que é o objetivo da pergunta. Casing pode fazer toda a diferença :)
Mike Goatly

5

Estendendo a resposta de @ isaac-pak, se você quiser passar o valor padrão para seu componente em um prop, você pode salvá-lo no estado no método de ciclo de vida componentDidMount () para garantir que o padrão seja selecionado na primeira vez.

Observe, eu atualizei o código a seguir para torná-lo mais completo e usar uma string vazia como o valor inicial para o comentário.

export default class MySelect extends Component {

    constructor(props) {
        super(props);
        this.state = {
            selectedValue: '',
        };
        this.handleChange = this.handleChange.bind(this);

        this.options = [
            {value: 'foo', label: 'Foo'},
            {value: 'bar', label: 'Bar'},
            {value: 'baz', label: 'Baz'}
        ];

    }

    componentDidMount() {
        this.setState({
            selectedValue: this.props.defaultValue,
        })
    }

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

    render() {
        return (
            <Select
                value={this.options.filter(({value}) => value === this.state.selectedValue)}
                onChange={this.handleChange}
                options={this.options}
            />
        )
    }
}

MySelect.propTypes = {
    defaultValue: PropTypes.string.isRequired
};

Eu entendo: Aviso: a valuesustentação selectnão deve ser nula. Considere usar uma string vazia para limpar o componente ou undefinedpara componentes não controlados.
Jason Rice

Estou fazendo o mesmo e estou recebendo o seguinte aviso:Warning: A component is changing a controlled input of type hidden to be uncontrolled. Input elements should not switch from controlled to uncontrolled (or vice versa).
alexventuraio 01/07/1919

@AlexVentura Tornei meu código um pouco mais completo e testei em meu sistema. Não recebo o aviso sobre entrada controlada. Tente atualizar seu código com base na minha resposta editada e poste de volta o que você encontrar.
Dan Meigs

2

Acabei de passar por isso sozinho e escolhi definir o valor padrão na função INIT do redutor.

Se você vincular seu select com redux, então é melhor não 'desvinculá-lo' de um valor padrão de seleção que não representa o valor real, em vez disso, defina o valor ao inicializar o objeto.


1

Se você não estiver usando redux-form e estiver usando o estado local para alterações, seu componente react-select pode ter a seguinte aparência:

class MySelect extends Component {

constructor() {
    super()
}

state = {
     selectedValue: 'default' // your default value goes here
}

render() {
  <Select
       ...
       value={this.state.selectedValue}
       ...
  />
)}


0

Se suas opções são assim

var options = [
  { value: 'one', label: 'One' },
  { value: 'two', label: 'Two' }
];

Você {props.input.value}deve corresponder a um dos 'value'em seu{props.options}

Ou seja, props.input.valuedeve ser 'one'ou'two'


0

Para selecionar automaticamente o valor de em selecione.

insira a descrição da imagem aqui

<div className="form-group">
    <label htmlFor="contactmethod">Contact Method</label>
    <select id="contactmethod" className="form-control"  value={this.state.contactmethod || ''} onChange={this.handleChange} name="contactmethod">
    <option value='Email'>URL</option>
    <option value='Phone'>Phone</option>
    <option value="SMS">SMS</option>
    </select>
</div>

Use o atributo de valor na tag de seleção

value={this.state.contactmethod || ''}

a solução está funcionando para mim.


0
  1. Crie uma propriedade de estado para o texto de opção padrão no construtor
    • Não se preocupe com o valor da opção padrão
  2. Adicione uma tag de opção à função de renderização. Mostrar apenas usando estado e expressão ternária
  3. Crie uma função para controlar quando uma opção for selecionada
  4. Altere o estado do valor da opção padrão nesta função do manipulador de eventos para nulo

    Class MySelect extends React.Component
    {
        constructor()
        {
            super()
            this.handleChange = this.handleChange.bind(this);
            this.state = {
                selectDefault: "Select An Option"
            }
        }
        handleChange(event)
        {
            const selectedValue = event.target.value;
            //do something with selectedValue
            this.setState({
                selectDefault: null
            });
        }
        render()
        {
            return (
            <select name="selectInput" id="selectInput" onChange={this.handleChange} value= 
                {this.selectedValue}>
             {this.state.selectDefault ? <option>{this.state.selectDefault}</option> : ''}
                {'map list or static list of options here'}
            </select>
            )
        }
    }
    

0

Estou usando frequentemente algo assim.

Valor padrão dos adereços neste exemplo

if(Defaultvalue ===item.value) {
    return <option key={item.key} defaultValue value={item.value}>{plantel.value} </option>   
} else {
    return <option key={item.key} value={item.value}>{plantel.value} </option> 
}

0

Você precisa fazer uma pesquisa profunda se usar grupos nas opções:

options={[
  { value: 'all', label: 'All' },
  {
    label: 'Specific',
    options: [
      { value: 'one', label: 'One' },
      { value: 'two', label: 'Two' },
      { value: 'three', label: 'Three' },
    ],
  },
]}
const deepSearch = (options, value, tempObj = {}) => {
  if (options && value != null) {
    options.find((node) => {
      if (node.value === value) {
        tempObj.found = node;
        return node;
      }
      return deepSearch(node.options, value, tempObj);
    });
    if (tempObj.found) {
      return tempObj.found;
    }
  }
  return undefined;
};
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.