如何在 react-select 中设置默认值
Posted
技术标签:
【中文标题】如何在 react-select 中设置默认值【英文标题】：How to set a default value in react-select 【发布时间】：2017-09-15 16:20:57 【问题描述】：我在使用 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>
但问题是我的下拉列表没有我希望的默认值。我做错了什么？有什么想法吗？
【问题讨论】：
这是正确的：value=props.input.value。你面临什么问题？ 我的问题是我希望我的选择在我第一次渲染它时有一个 defaultValue 但我不能 第一次渲染时 props.input.value 的值是多少？ 这是我的问题。如何将其设置为具有默认值？ 你想要什么值？ 【参考方案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
/>
);
【讨论】：
与 redux/react 绑定的重点是让 ui 实时反映对象的值。这种方法解耦了这种绑定。考虑在 reducer 中设置默认值。 @JosephJuhnke 先检查问题。这是如何设置默认值。selectedValue 已更改为 value。检查文档react-select.com/props
新版本中现在有defaultValue字段。
棘手的是您需要将所选对象设置为“defaultValue”字段，而不是选项的值。例如0,1,2【参考方案2】：
我使用了 defaultValue 参数，下面是我如何实现默认值以及在从下拉列表中选择选项时更新默认值的代码。
<Select
name="form-dept-select"
options=depts
defaultValue= label: "Select Dept", value: 0
onChange=e =>
this.setState(
department: e.label,
deptId: e.value
);
/>
【讨论】：
谢谢，现在我知道 defaultValue 接受对象而不仅仅是值。 不是根据 React 文档或智能感知它没有：reactjs.org/docs/uncontrolled-components.html#default-values @Alex - （以及 2 年后这里的任何人），这个问题是参考 react-select，一个组件库。您链接到的文档参考了原生 HTML 选择元素。【参考方案3】：如果您来这里是为了 react-select v2，但仍然遇到问题 - 版本 2 现在只接受 value、defaultValue 等对象。
也就是说，尝试使用value=value: 'one', label: 'One'，而不仅仅是value='one'。
【讨论】：
不完整。如果您将值设置为该值，则无法再更改该值 @Toskan - 是的，这是 ReactJS 和单向数据绑定的原则之一，它影响所有表单元素，而不仅仅是这个库。如果您选择使用受控组件，则需要在 react 之外自行处理更改。这个答案谈到它并链接到 React 文档：***.com/questions/42522515/… 好吧，那么您的解决方案解决了什么问题？也就是说，硬编码一个值？ 这里给出的value: 'one', label: 'One'的例子只是一个例子。在您的应用程序中，这将是一个具有相同结构的变量/道具。
数据绑定的一种方式并不意味着一旦从道具设置的数据不能在子组件中更改，如果愿意的话。如果使用defaultValue 而不是value，这正是会发生的情况【参考方案4】：
我遇到了类似的错误。确保您的选项具有 value 属性。
<option key=index value=item> item </option>
然后将选择元素值最初与选项值匹配。
<select
value=this.value />
【讨论】：
我认为这是最好/最优雅的解决方案。我这样想对吗？ 如果这样做，值不会改变，你已经写了onChange函数也设置了改变 这是一个普通的 HTML 【参考方案5】：扩展@isaac-pak 的回答，如果你想在 props 中将默认值传递给你的组件，你可以在 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
;
【讨论】：
我明白了：警告：select 上的 value 属性不应为空。考虑使用空字符串来清除组件或undefined 用于不受控制的组件。
我也在做同样的事情，我收到了这个警告：Warning: A component is changing a controlled input of type hidden to be uncontrolled. Input elements should not switch from controlled to uncontrolled (or vice versa).
@AlexVentura 我已经使我的代码更加完整，并在我的系统上对其进行了测试。我没有收到有关受控输入的警告。尝试根据我编辑的回复更新您的代码，然后发回您找到的内容。【参考方案6】：
像这样使用 defaultInputValue 道具：
<Select
name="name"
isClearable
onChange=handleChanges
options=colourOptions
isSearchable="true"
placeholder="Brand Name"
defaultInputValue="defaultInputValue"
/>
更多参考https://www.npmjs.com/package/react-select
【讨论】：
【参考方案7】：传递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
/>
【讨论】：
对于任何未来的读者来说，这可能是最好和最简单的选择。 value 属性也可以在没有 redux 的情况下工作。【参考方案8】：我自己刚刚经历了这个，并选择在减速器 INIT 函数中设置默认值。
如果您使用 redux 绑定您的选择，那么最好不要使用不代表实际值的选择默认值“解除绑定”它，而是在初始化对象时设置该值。
【讨论】：
【参考方案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;
;
【讨论】：
【参考方案10】：当我按照上面的所有答案进行操作时，我想到了，我应该写这个。
您必须设置属性 value，而不是 DefaultValue。 我花了几个小时使用它，阅读文档，他们提到使用 DefaultValue，但它不起作用。 正确的方法是，
options=[label:'mylabel1',value:1,label:'mylabel2',value:2]
seleted_option=label:'mylabel1',value:1
<Select
options=options
value=selected_option/>
【讨论】：
为此我会在你背后亲吻你！谢谢大佬。【参考方案11】：如果您没有使用 redux-form 并且您使用本地状态进行更改，那么您的 react-select 组件可能如下所示：
class MySelect extends Component
constructor()
super()
state =
selectedValue: 'default' // your default value goes here
render()
<Select
...
value=this.state.selectedValue
...
/>
)
【讨论】：
【参考方案12】：我经常使用这样的东西。
本例中 props 的默认值
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>
【讨论】：
【参考方案13】：使用
<select value=stateValue>。确保stateValue 中的值在选择字段中给出的选项中。
【讨论】：
【参考方案14】：几点：
defaultValue 适用于初始渲染，不会在连续渲染过程中更新。确保在您拥有 defaultValue 之后渲染 Select。
defaultValue 应该像这样以对象或对象数组的形式定义：value:'1', label:'Guest'，最防弹的方法是将其设置为选项列表项：myOptionsList[selectedIndex]
【讨论】：
【参考方案15】：如果你的选择是这样的
var options = [
value: 'one', label: 'One' ,
value: 'two', label: 'Two'
];
您的props.input.value 应与您的props.options 中的'value' 之一匹配
意思是，props.input.value 应该是'one' 或'two'
【讨论】：
【参考方案16】：自动选择 in select 的值。
<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>
在select标签中使用value属性
value=this.state.contactmethod || ''
解决方案对我有用。
【讨论】：
【参考方案17】：-
在构造函数中为默认选项文本创建状态属性
不用担心默认选项值
为渲染函数添加一个选项标签。只显示使用状态和三元表达式
创建一个函数以在选择选项时进行处理
将此事件处理函数中的默认选项值的状态更改为 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>
)
【讨论】：
【参考方案18】：如果你想在 react-select 中定义自定义标签，试试这个。
<Select
getOptionLabel=( name ) => name
/>
【讨论】：
【参考方案19】：您可以简单地这样做：
在 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 中设置默认值的主要内容，如果未能解决你的问题，请参考以下文章
如何在 AssociationField EasyAdmin 3 中设置默认值