Reactjs 反应选择可创建的defaultInputValue不工作

我已经创建了一个

createableselect

控件，并设置了

defaultInputValue

属性。虽然加载控件时会在控件上显示默认值，但在我第一次单击控件（在文本框或下拉符号上）后，列表不会显示，再次单击时，默认值将替换为“选择…”，然后显示列表

我希望在单击控件时不会清除默认值，除非我明确清除它。我希望保留默认值，直到我在下拉列表中进行选择或自己清除该值

import React, { Component } from 'react';


import CreatableSelect from 'react-select/creatable';

export default class CreatableSingle extends Component<*, State> {
  handleChange = (newValue: any, actionMeta: any) => {
    console.group('Value Changed');
    console.log(newValue);
    console.log(`action: ${actionMeta.action}`);
    console.groupEnd();
  };
  handleInputChange = (inputValue: any, actionMeta: any) => {
    console.group('Input Changed');
    console.log(inputValue);
    console.log(`action: ${actionMeta.action}`);
    console.groupEnd();
  };
  render() {
    return (
      <CreatableSelect
        isClearable
        defaultInputValue ={'Yellow'}
        onChange={this.handleChange}
        onInputChange={this.handleInputChange}
        options={ [
          { value: 'ocean', label: 'Ocean' },
          { value: 'blue', label: 'Blue' },
          { value: 'purple', label: 'Purple' },
          { value: 'red', label: 'Red' }]}
      />
    );
  }
}

import React，{Component}来自'React'；
从“反应选择/可创建”导入可创建选择；
导出默认类CreatableSingle扩展组件{
handleChange=（newValue:any，actionMeta:any）=>{
console.group（“值已更改”）；
console.log（newValue）；
log（`action:${actionMeta.action}`）；
console.groupEnd（）；
};
handleInputChange=（inputValue:any，actionMeta:any）=>{
console.group（“输入已更改”）；
console.log（输入值）；
log（`action:${actionMeta.action}`）；
console.groupEnd（）；
};
render（）{
返回(
);
}
}

以上代码来自。。因为我会有一个默认值（来自数据库），所以我在下面添加了一行。默认值“黄色”不是选项数组的一部分

---

defaultInputValue={'Yellow'}

似乎使用了

defaultInputValue

来根据搜索结果设置搜索输入的初始值

我认为您需要

defaultValue

prop:

import React, { Component } from 'react';
import CreatableSelect from 'react-select/creatable';

export default class CreatableSingle extends Component<*, State> {
  handleChange = (newValue: any, actionMeta: any) => {
    console.group('Value Changed');
    console.log(newValue);
    console.log(`action: ${actionMeta.action}`);
    console.groupEnd();
  };

  handleInputChange = (inputValue: any, actionMeta: any) => {
    console.group('Input Changed');
    console.log(inputValue);
    console.log(`action: ${actionMeta.action}`);
    console.groupEnd();
  };

  render() {
    return (
      <CreatableSelect
        isClearable
        defaultValue={{ value: 'red', label: 'Red' }}
        onChange={this.handleChange}
        onInputChange={this.handleInputChange}
        options={ [
          { value: 'ocean', label: 'Ocean' },
          { value: 'blue', label: 'Blue' },
          { value: 'purple', label: 'Purple' },
          { value: 'red', label: 'Red' }]}
      />
    );
  }
}

import React，{Component}来自'React'；
从“反应选择/可创建”导入可创建选择；
导出默认类CreatableSingle扩展组件{
handleChange=（newValue:any，actionMeta:any）=>{
console.group（“值已更改”）；
console.log（newValue）；
log（`action:${actionMeta.action}`）；
console.groupEnd（）；
};
handleInputChange=（inputValue:any，actionMeta:any）=>{
console.group（“输入已更改”）；
console.log（输入值）；
log（`action:${actionMeta.action}`）；
console.groupEnd（）；
};
render（）{
返回(
);
}
}

请提供任何建议/帮助？您是否尝试了

defaultValue

而不是回答中建议的

defaultInputValue

？谢谢您，此解决方案有效。再次感谢您的回复我很高兴能帮上忙！考虑将答案标记为点击点击答案旁边的选中标记，以将其从灰色变为填充。通过这种方式，你可以帮助其他有类似问题的人找到解决方法