React-select'de varsayılan bir değer nasıl ayarlanır

React-select'i kullanırken bir sorun yaşıyorum. Redux formunu kullanıyorum ve react-select bileşenimi redux formuyla uyumlu hale getirdim. İşte kod:

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}
    />
);

ve işte bunu nasıl oluşturuyorum:

<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>

Ancak sorun şu ki, açılır menümün istediğim gibi varsayılan bir değeri olmaması. Neyi yanlış yapıyorum? Herhangi bir fikir?

Sanırım böyle bir şeye ihtiyacın var:

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}
  />
);

DefaultValue parametresini kullandım, aşağıdaki kod, varsayılan bir değere nasıl ulaştığımı ve açılır menüden bir seçenek belirlendiğinde varsayılan değeri güncellediğimi gösteriyor.

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

Şimdi sadece bir nesne olarak kabul sürüm 2 - Buraya için geldiyseniz v2 seçme-tepki ve hala sorun olan value,defaultValue vb

Yani, value={{value: 'one', label: 'One'}}sadece yerine kullanmayı deneyin value={'one'}.

Ben de benzer bir hata yaşıyordum. Seçeneklerinizin bir değer özelliğine sahip olduğundan emin olun.

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

Ardından, seçilen öğe değerini başlangıçta options değeriyle eşleştirin.

<select 
    value={this.value} />

@ İsaac-pak'ın cevabını genişleterek, bir prop içindeki bileşeninize varsayılan değeri iletmek istiyorsanız, varsayılanın ilk kez seçildiğinden emin olmak için bunu componentDidMount () yaşam döngüsü yönteminde durumunda kaydedebilirsiniz.

Not, aşağıdaki kodu daha eksiksiz hale getirmek ve yorum başına başlangıç ​​değeri olarak boş bir dize kullanmak için güncelledim.

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
};

Bunu kendim inceledim ve redüktör INIT işlevinde varsayılan değeri ayarlamayı seçtim.

Seçiminizi redux ile bağlarsanız, o zaman en iyisi gerçek değeri temsil etmeyen bir varsayılan seçim değeriyle 'bağını çözmeyin', bunun yerine nesneyi başlattığınızda değeri ayarlayın.

DefaultInputValue props'larını şu şekilde kullanın:

<Select
   name="name"
   isClearable
   onChange={handleChanges}
   options={colourOptions}
   isSearchable="true"
   placeholder="Brand Name"
   defaultInputValue="defaultInputValue"
/>

          

daha fazla referans için https://www.npmjs.com/package/react-select

Redux-form kullanmıyorsanız ve değişiklikler için yerel durumu kullanıyorsanız, react-select bileşeniniz aşağıdaki gibi görünebilir:

class MySelect extends Component {

constructor() {
    super()
}

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

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

Seçeneklerde grupları kullanıyorsanız derin arama yapmanız gerekir:

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;
};

Seçenekleriniz böyleyse

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

Sizin {props.input.value}biriyle eşleşmesi gerektiğini 'value'de senin{props.options}

Anlamı, props.input.valueya 'one'da olmalıdır'two'

İn select değerini otomatik seçmek için.

<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>

Select etiketinde değer özelliğini kullanın

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

çözüm benim için çalışıyor.

1. Yapıcıdaki varsayılan seçenek metni için bir durum özelliği oluşturun
   • Varsayılan seçenek değeri hakkında endişelenmeyin
2. Oluşturma işlevine bir seçenek etiketi ekleyin. Yalnızca durum ve üçlü ifade kullanarak göster
3. Bir seçenek seçildiğinde işlenecek bir işlev oluşturun

4. Bu olay işleyici işlevindeki varsayılan seçenek değerinin durumunu null olarak değiştirin

   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>
           )
       }
   }
   

Sık sık böyle bir şey kullanıyorum.

Bu örnekteki sahne donanımlarından varsayılan değer

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> 
}