我在使用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}
    />
);

下面是我如何呈现的:

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

但问题是,我的下拉列表没有我希望的默认值.我做错了什么?有什么 idea 吗?

推荐答案

我想你需要这样的东西:

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

Reactjs相关问答推荐

react 表复选框不对任何操作做出react

react 派生状态未正确更新

如何使用next.js以DOM为目标在映射中使用Ref

滚动事件监听器在Next.js客户端组件中不触发

在react.js的条形图中获取错误&unfined是不可迭代的

有没有办法在Shopify中显示自定义计算的交货日期?

无法在主组件的返回语句中呈现预期组件

FireBase Reaction Native-在呈现视图之前等待响应

更改点几何体的坐标会将其隐藏

onClick 事件处理程序未应用于样式组件

Mui 在 TextField 标签上添加工具提示显示两个工具提示框

如何将 MUI X 数据网格单元格方向更改为行级而不是列级?

REACT: UseState 没有更新变量(ant design 模态形式)

React 应用程序可以嵌入到 PowerPoint 中吗?

臭名昭著的测试未包含在 act(...) 中

AWS 全栈应用程序部署教程构建失败

单击按钮或文本从一个组件移动到另一个组件

React Router 6.4CreateBrowserRouter子元素不显示

.filter() 函数在删除函数中创建循环 - React

如何从另一个切片中的不同切片获取状态并对其进行处理?