[英]How to set a default value in 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}
/>
);
以及我如何渲染它:
<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}
/>
);
我使用了 defaultValue 参数,下面是我如何获得默认值以及从下拉列表中选择一个选项时更新默认值的代码。
<Select
name="form-dept-select"
options={depts}
defaultValue={{ label: "Select Dept", value: 0 }}
onChange={e => {
this.setState({
department: e.label,
deptId: e.value
});
}}
/>
如果您来这里是为了 react-select v2,但仍然遇到问题 - 版本 2 现在只接受一个对象作为value
、 defaultValue
等。
也就是说,尝试使用value={{value: 'one', label: 'One'}}
,而不仅仅是value={'one'}
。
我遇到了类似的错误。 确保您的选项具有 value 属性。
<option key={index} value={item}> {item} </option>
然后将选择元素值最初与选项值匹配。
<select
value={this.value} />
扩展@isaac-pak 的答案,如果您想将默认值传递给 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
};
像这样使用 defaultInputValue 道具:
<Select
name="name"
isClearable
onChange={handleChanges}
options={colourOptions}
isSearchable="true"
placeholder="Brand Name"
defaultInputValue="defaultInputValue"
/>
我自己刚刚经历了这个并选择在 reducer INIT 函数中设置默认值。
如果您使用 redux 绑定您的选择,那么最好不要使用不代表实际值的选择默认值“解除绑定”,而是在初始化对象时设置该值。
如果在选项中使用组,则需要进行深度搜索:
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;
};
如果您没有使用 redux-form 并且您使用本地状态进行更改,那么您的 react-select 组件可能如下所示:
class MySelect extends Component {
constructor() {
super()
}
state = {
selectedValue: 'default' // your default value goes here
}
render() {
<Select
...
value={this.state.selectedValue}
...
/>
)}
我经常使用这样的东西。
本例中 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>
}
传递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}
/>
使用<select value={stateValue}>
。 确保stateValue
中的值在选择字段中给出的选项中。
如果你的选择是这样的
var options = [
{ value: 'one', label: 'One' },
{ value: 'two', label: 'Two' }
];
您{props.input.value}
应匹配的一个'value'
在您的{props.options}
意思是, props.input.value
应该是'one'
或'two'
自动选择 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 || ''}
解决方案对我有用。
将此事件处理函数中默认选项值的状态更改为空
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> ) } }
在 react-select 中,如果你想定义自定义标签,试试这个。
<Select
getOptionLabel={({ name }) => name}
/>
几点:
defaultValue适用于初始渲染,它不会在顺序渲染过程中更新。 确保在手头有defaultValue之后呈现您的 Select 。
defaultValue应以对象或对象数组的形式定义,如下所示: {value:'1', label:'Guest'}
,最安全的方法是将其设置为选项列表的项目: myOptionsList[selectedIndex]
当我按照上面的所有答案进行操作时,我想到了,我应该写这个。
你必须设置 prop值,而不是DefaultValue 。 我花了几个小时来使用它,阅读文档,他们提到使用 DefaultValue,但它不起作用。 正确的方法是,
options=[{label:'mylabel1',value:1},{label:'mylabel2',value:2}]
seleted_option={label:'mylabel1',value:1}
<Select
options={options}
value={selected_option}/>
defaultValue
而不是selected
如果要从菜单中隐藏值,请使用hidden
:
<option defaultValue hidden>
{'--'}
</option>
{options.map(opt => (
<option key={opt} value={opt.replaceAll(/[,'!?\s]/gi, '')}>
{opt}
</option>
))}
想用 Hooks 给我加两分钱,
你可以在 DropDown 中订阅 props
import React, { useEffect, useState } from 'react';
import Select from 'react-select';
const DropDown = (props) => {
const { options, isMulti, handleChange , defaultValue } = props;
const [ defaultValueFromProps, setdefaultValueFromProps ] = useState(undefined)
useEffect(() => {
if (defaultValue) {
setdefaultValueFromProps(defaultValue)
}
}, [props])
const maybeRenderDefaultValue = () => {
if (defaultValue) {
return { label: defaultValueFromProps, value: defaultValueFromProps }
}
}
return (
<div>
<Select
width='200px'
menuColor='red'
isMulti={isMulti}
options={options}
value={maybeRenderDefaultValue()}
clearIndicator
onChange={(e) => handleChange(e)}
/>
</div>
)
}
export default DropDown;
然后在父组件中从 state 传递初始值或更改值
<DropDown options={GenreOptions} required={true} defaultValue={recipeGenre === undefined ? recipe.genre : recipeGenre} handleChange={handleGenreChange}/>
然后,如果它是一个新的形式(没有默认值),你不必担心,因为 useEffect 会忽略设置任何东西
在React-hook-form的useForm
hook 中提供defaultValues
参数
const {
control,
handleSubmit,
formState: { errors },
} = useForm({
resolver: yupResolver(schema),
defaultValues: {
select: { label: "20", value: 20 },
},
});
反应选择组件
<Select
optons={[
{ value: "20", label: "20" },
{ value: "30", label: "30" },
{ value: "25", label: "25" },
]}
/>
或者
为react-select
组件提供defaultValue
属性
<Select
defaultValue={{ label: "20", value: 20 }
optons={[
{ value: "20", label: "20" },
{ value: "30", label: "30" },
{ value: "25", label: "25" },
]}
/>
我认为您可以在标签处使用选定的道具
<select
defaultValue={plan.name}
className="select w-full max-w-xs text-gray-700 mt-4"
>
{plans.vps.map((i) => (
<option
selected={plan.name == i.name}
key={i.name}
className="p-2 border"
value={i.name}
>
{i.name}
</option>
))}
</select>
看看这个selected={plan.name == i.name}
还要注意值更新defaultValue={plan.name}
2022 示例与 Redux 与 useSelector 反应
截至 2022 年,react-select 中有一个 defaultValue 选项。 请注意,如果您使用 getOptionLabel 和 getOptionValue,您需要使您的默认值与您设置的那些选项参数相匹配......
例如
const responder = useSelector((state) => state.responder)
<Select
name="keyword"
required={true}
className="mb-3"
styles={customStyles}
components={animatedComponents}
closeMenuOnSelect={true}
options={keywords}
defaultValue={responder ? responder[0]?.responder?.keyword?.map((el) => { return {title: el.title, _id: el._id}}): ""}
getOptionLabel={({title}) => title}
getOptionValue={({_id}) => _id}
onChange={(_id) => setUpload({...upload, keyword: _id})}
isMulti
placeholder="select Keywords"
isSearchable={true}
errors={errors}
innerRef={register({
required: "Add your Keyword"
})}
/>
而不是用 {label: "this", value: "that} 设置你的 defaultValue
我需要设置我的 defaultValue({title:"this", _id:"that"})
<Input
type='select'
name='defaultproperty'
id='propertyselect'
>
<option
key={id}
value={item.propertyId}
id = {item.propertyName}
defaultValue = {orgPropertyId}
selected={item.propertyId === orgPropertyId}
>
{item.propertyName}
</option>
)
</Input>
使用 selected 将达到默认值文本的目的
你可以简单地这样做:
在 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 中正常使用它。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.