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

我在使用react select时遇到问题。我使用redux表单，并且我已经使我的react-select组件与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}
    />
);

constmyselect=props=>(
props.input.onChange（值）}
onBlur={（）=>props.input.onBlur（props.input.value）}
选项={props.options}
占位符={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>

---

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

我想你需要这样的东西：

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

class MySelect extends Component {

constructor() {
    super()
}

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

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

constmyselect=props=>(
option.label==='Some label'）}
onChange={value=>props.input.onChange（value）}
onBlur={（）=>props.input.onBlur（props.input.value）}
选项={props.options}
占位符={props.placeholder}
/>
);

我也有类似的错误。确保选项具有值属性

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

{item}

然后将“选择”元素值最初与“选项”值相匹配

<select 
    value={this.value} />

---

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

---

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

如果您的选择是这样的

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

您的

{props.input.value}

应该与

{props.options}

中的

'value'

之一匹配

---

意思是，

props.input.value

应该是

'one'

或

'two'

如果您没有使用redux表单，并且您正在使用本地状态进行更改，那么您的react select组件可能如下所示：

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

class MySelect extends Component {

constructor() {
    super()
}

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

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

类MySelect扩展组件{
构造函数（）{
超级（）
}
状态={
selectedValue:'default'//默认值显示在此处
}
render（）{
)}

我使用了defaultValue参数，下面是我如何获得默认值以及在从下拉列表中选择选项时更新默认值的代码

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

{
这是我的国家({
部门：e.label，
deptId:e.value
});
}}
/>

如果您来这里是为了react select v2，但仍然有问题-版本2现在只接受对象作为

值

，

默认值

，等等

---

也就是说，尝试使用

value={{value:'one'，label:'one'}}

，而不是仅仅扩展@isaac-pak的答案

value={'one'}

，如果您想将默认值以prop形式传递给组件，您可以在componentDidMount（）生命周期方法中将其保存为state，以确保第一次选择默认值

注意，我已经更新了以下代码，使其更加完整，并使用空字符串作为每个注释的初始值

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

导出默认类MySelect扩展组件{
建造师（道具）{
超级（道具）；
此.state={
selectedValue:“”，
};
this.handleChange=this.handleChange.bind（this）；
此选项=[
{值：'foo'，标签：'foo'}，
{值：'bar'，标签：'bar'}，
{值：'baz'，标签：'baz'}
];
}
componentDidMount（）{
这是我的国家({
selectedValue:this.props.defaultValue，
})
}
handleChange（已选择选项）{
this.setState（{selectedValue:selectedOption.target.value}）；
}
render（）{
返回(
value==this.state.selectedValue）}
onChange={this.handleChange}
选项={this.options}
/>
)
}
}
MySelect.propTypes={
defaultValue:PropTypes.string.isRequired
};

在选择中自动选择的值

这个解决方案对我有效

为构造函数中的默认选项文本创建状态属性

• 不要担心默认选项值

向渲染函数添加选项标记。仅显示使用状态和三元表达式

创建选择选项时要处理的函数

将此事件处理程序函数中默认选项值的状态更改为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>
        )
    }
}

类MySelect扩展了React.Component
{
构造函数（）
{
超级（）
this.handleChange=this.handleChange.bind（this）；
此.state={
选择默认值：“选择一个选项”
}
}
手变（活动）
{
const selectedValue=event.target.value；
//用selectedValue做某事
这是我的国家({
选择默认值：空
});
}
render（）
{
返回(
{this.state.selectDefault？{this.state.selectDefault}:'''
{“此处的映射列表或静态选项列表”}
)
}
}

---

我经常使用这样的东西

本例中道具的默认值

if（Defaultvalue==item.value）{
返回{plantel.value}
}否则{
返回{plantel.value}
}

使用如下的defaultInputValue道具：

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

          

---

有关更多参考信息

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

options={[
  { value: 'all', label: 'All' },
  {
    label: 'Specific',
    options: [
      { value: 'one', label: 'One' },
      { value: 'two', label: 'Two' },
      { value: 'three', label: 'Three' },
    ],
  },
]}

---

传递

值

对象：

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

---

您只需执行以下操作：

在“反应选择”中，选择初始选项值

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中，for

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

（x.value.includes（apiData[0]？.games）））[0]？.label
}}
onChange={（newValue，name）=>handleChange（newValue，'games'）}
/>

---

您也可以在JavaNormal中使用它。

这是正确的：value={props.input.value}。您面临的问题是什么？我的问题是，我希望我的选择在第一次渲染时有一个默认值，但我不能做什么

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

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