Question

我有使用react-select的问题。我使用redux形式，并且我的反应选择组件与redux形式兼容。这是代码：

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

以及我如何呈现它：

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

但问题是我的下拉列表没有我想要的默认值。我做错了什么？有什么想法吗？

Answer 1

我猜你需要这样的东西：

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

Answer 2

我使用defaultValue参数，下面是从下拉菜单中选择选项时如何实现默认值以及更新默认值的代码。

apachectl configtest

Answer 3

如果您是来react-select v2的，但仍然遇到麻烦-版本2现在仅接受value，defaultValue等对象。

也就是说，尝试使用value={{value: 'one', label: 'One'}}，而不只是value={'one'}。

Answer 4

我遇到了类似的错误。确保您的选项具有值属性。

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

然后将choose元素值最初匹配到选项值。

<select 
    value={this.value} />

Answer 5

我自己完成了这个并选择在reducer INIT函数中设置默认值。

如果将select与redux绑定在一起，那么最好不要用一个不代表实际值的select默认值“解除绑定”，而是在初始化对象时设置该值。

Answer 6

像这样使用defaultInputValue道具：

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

更多参考信息https://www.npmjs.com/package/react-select

Answer 7

使用 <select value={stateValue}>。确保 stateValue 中的值在选择字段中给出的选项中。

Answer 8

传递value对象：

<Select
                    isClearable={false}
                    options={[
                      {
                        label: 'Financials - Google',
                        options: [
                          { value: 'revenue1', label: 'Revenue' },
                          { value: 'sales1', label: 'Sales' },
                          { value: 'return1', label: 'Return' },
                        ],
                      },
                      {
                        label: 'Financials - Apple',
                        options: [
                          { value: 'revenue2', label: 'Revenue' },
                          { value: 'sales2', label: 'Sales' },
                          { value: 'return2', label: 'Return' },
                        ],
                      },
                      {
                        label: 'Financials - Microsoft',
                        options: [
                          { value: 'revenue3', label: 'Revenue' },
                          { value: 'sales3', label: 'Sales' },
                          { value: 'return3', label: 'Return' },
                        ],
                      },
                    ]}
                    className="react-select w-50"
                    classNamePrefix="select"
                    value={{ value: 'revenue1', label: 'Revenue' }}
                    isSearchable={false}
                    placeholder="Select A Matric"
                    onChange={onDropdownChange}
                  />

Answer 9

如果在选项中使用组，则需要进行深度搜索：

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

Answer 10

几点：

defaultValue 适用于初始渲染，不会在顺序渲染过程中更新。确保在您拥有 defaultValue 之后呈现您的选择。
defaultValue 应该以对象或对象数组的形式定义，例如：{value:'1', label:'Guest'}，最安全的方法是将其设置为选项列表的项目：{{1 }}

Answer 11

在 react-select 中，如果你想为自定义标签定义，试试这个。

  <Select
    getOptionLabel={({ name }) => name}
  />

Answer 12

我经常使用这种东西。

此示例中道具的默认值

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

Answer 13

在构造函数中为默认选项文本创建一个state属性
- 不用担心默认选项值
将选项标签添加到渲染功能。仅使用状态和三元表达式显示
创建一个函数来处理选择选项时的情况

将此事件处理函数中的默认选项值的状态更改为null

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

Answer 14

要自动选择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>

在选择标记中使用value属性

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

该解决方案对我有用。

Answer 15

扩展@ isaac-pak的答案，如果您要将默认值传递给prop中的组件，则可以将其保存在componentDidMount（）生命周期方法的状态中，以确保首次选择默认值。 / p>

export default class MySelect extends Component {

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

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

    handleChange(selectedValue) {
        this.setState({selectedValue});
    }

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

Answer 16

如果您不使用redux-form，而是使用本地状态进行更改，则您的react-select组件可能如下所示：

class MySelect extends Component {

constructor() {
    super()
}

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

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

Answer 17

如果你的选择是这样的

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

您的{props.input.value}应该与'value'

中的{props.options}之一相匹配

含义，props.input.value应为'one'或'two'

Answer 18

你可以简单地这样做：

在 react-select 中，初始选项值

const optionsAB = [
  { value: '1', label: 'Football' },
  { value: '2', label: 'Cricket' },
  { value: '3', label: 'Tenis' }
];

仅提供 API：

apiData = [
  { games: '1', name: 'Football', City: 'Kolkata' },
  { games: '2', name: 'Cricket', City: 'Delhi' },
  { games: '3', name: 'Tenis', City: 'Sikkim' }
];

在 react-select 中，对于 defaultValue=[{value: 1, label: Hi}]。像这个例子一样使用 defaultValue：

<Select
  isSearchable
  isClearable
  placeholder="GAMES"
  options={optionsAB}
  defaultValue={{
    value: apiData[0]?.games , 
    label: (optionsAB || []).filter(x => (x.value.includes(apiData[0]?.games)))[0]?.label
  }}
  onChange={(newValue, name) => handleChange(newValue, 'games')}
/>

您也可以在 Java 中正常使用它。

如何在react-select中设置默认值

18 个答案: