React-select отключить опцию response-select на основе другого компонента реакции-выбора - PullRequest
Новая
       8

React-select отключить опцию response-select на основе другого компонента реакции-выбора

0 голосов
/ 07 февраля 2019

У меня есть два <CreatableSelect /> для свойств min и max. Есть ли способ отключить некоторые параметры для второго <CreatableSelect />, если первое <CreatableSelect /> значение меньше второго <CreatableSelect /> параметра?Я использую реагировать-выберите v2.Я знаю, isOptionDisabled опора доступна, но мне нужно отключить опции, как только один из двух изменится.Я также могу изменить объект параметров, который передается в <CreatableSelect />, и установить другое свойство isDisabled, но это неэффективно. 

import React from 'react';
import { FormSection, Field } from 'redux-form';
import CreatableSelect from 'react-select/lib/Creatable';

// components
import { LAND_SIZE_OPTIONS } from '../../../../../../constants/search';

const handleInputChange = (newValue, callBack) => {
    callBack(false);
};

const handleSelectChange = (newValue, input, callBack) => {
    callBack(true);
    input.onChange(newValue.value);
};

const RenderSelect = props => (
    <CreatableSelect
        simpleValue
        onChange={newValue => handleSelectChange(newValue, props.input, props.callBack)}
        onInputChange={newValue => handleInputChange(newValue, props.callBack)}
        options={LAND_SIZE_OPTIONS}
        placeholder={props.placeholder}
    />
);

const LandSizeSelect = props => (
    <div className="land-size-min-max-container">
        <p>Land Size</p>
        <div className="menu-select">
            <FormSection name="landArea">
                <Field
                    name="min"
                    component={RenderSelect}
                    {...{
                        callBack:
                        props.overrideDropdownSelectClickOutside,
                        placeholder: 'Min',
                        stateValue: props.max,
                    }}
                />
                <Field
                    name="max"
                    component={RenderSelect}
                    {...{
                        callBack:
                        props.overrideDropdownSelectClickOutside,
                        placeholder: 'Max',
                        stateValue: props.min,
                    }}
                />
            </FormSection>
        </div>
    </div>

);

export default LandSizeSelect;

1 Ответ

0 голосов
/ 08 февраля 2019

Сформируйте документацию здесь Я думаю, что ваш лучший шанс - передать наши выбранные значения в подпорках от одного к другому.

Затем в вашем RenderSelect вы создадите новую опциюустановить с помощью isDisabled prop либо использовать функцию isOptionDisabled следующим образом: 

  const RenderSelect = props => (
    const { functionToCompare } = props
    const options = LAND_SIZE_OPTIONS.map(functionToCompare)
    return {
      <CreatableSelect
          simpleValue
          onChange={newValue => handleSelectChange(newValue, props.input, props.callBack)}
          onInputChange={newValue => handleInputChange(newValue, props.callBack)}
          options={options}
          placeholder={props.placeholder}
      />
    } 
);

Где functionToCompare может быть что-то вроде: 

const functionToCompare = option => {
  return {
    ...option,
    isDisabled: option.value <= formValueSelector("newPost")(state, "title").value
  }
}
...