Question

我有两个<CreatableSelect />用于最小和最大属性，如果第一个<CreatableSelect />的值小于第二个<CreatableSelect />，有没有办法我可以禁用第二个<CreatableSelect />的某些选项选项？我正在使用react-select v2。我知道isOptionDisabled支持可用，但是一旦两个选项之一更改，我就需要禁用选项。我还可以修改传递给<CreatableSelect />的options对象，并设置另一个属性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;

Answer 1

形成文档here，我认为您最好的机会是将我们在道具中选择的值从一个传递到另一个。

然后在RenderSelect中使用isDisabled属性创建一个新选项集，或者使用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
  }
}

基于其他反应选择组件的反应选择禁用反应选择选项

1 个答案: