如何设置默认值的反应-选择

我有一个问题，使用反应选择。我使用 redux 表单，并使我的选择反应组件与 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>

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

474142 次浏览
小开
最佳答案

我想你需要这样的东西:

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

# 编辑1: 在新版本中

const MySelect = props => (
<Select
{...props}
options={props.options}
onChange = {value => props.input.onChange(value)}
onBlur={() => props.input.onBlur(props.input.value)}//If needed
defaultValue={props.defaultValue || 'Select'}
options={props.options}
placeholder={props.placeholder}
/>
);
小开

我有一个类似的错误。请确保您的选项有一个价值属性。

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

然后将选择元素值初始化为选项值。

<select
value={this.value} />
小开

我只是自己完成了这个步骤，并选择在 reduce 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-form，而是使用本地状态进行更改，那么您的 response-select 组件可能看起来如下:

class MySelect extends Component {


constructor() {
super()
}


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


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

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

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

如果您来这里是为了响应-选择 v2，并且仍然有问题-版本2现在只接受 value、 defaultValue等对象。

也就是说，尝试使用 value=\{\{value: 'one', label: 'One'}}，而不仅仅是 value={'one'}。

小开

在@isaac-pak 的回答的基础上，如果您希望将默认值传递给道具中的组件，那么可以将其保存在 Component entDidMount ()生命周期方法中的状态中，以确保第一次选择默认值。

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

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

自动选择 in select 的值。

enter image description here

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

解决办法对我很有效。

小开
  1. 为构造函数中的默认选项文本创建状态属性
    • 不要担心默认选项值
  2. 添加一个选项标签到渲染函数中。只显示使用状态和三元表达式
  3. 创建要在选择选项时处理的函数

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

我经常使用这样的东西。

此示例中道具的默认值

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>
}
小开

像这样使用 defaultInputValue 道具:

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

参考 https://www.npmjs.com/package/react-select

小开

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

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

传递 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}
/>
小开

你可以简单地这样做:

在 response-select 中，初始选项值

const optionsAB = [
{ value: '1', label: 'Football' },
{ value: '2', label: 'Cricket' },
{ value: '3', label: 'Tenis' }
];

只提供以下空气污染指数:

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

对于 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 普通版中使用它。

小开

确保 stateValue中的值是在选择字段中给出的选项之一。

小开

如果要为自定义标签定义，请尝试执行以下操作。

  <Select
getOptionLabel={({ name }) => name}
/>
小开

以下是几点:

  1. DefaultValue 适用于初始呈现，它不会在顺序呈现传递时更新。请确保您呈现您的选择后，您有 默认值在手。

  2. DefaultValue 应该以对象或对象数组的形式定义，如下所示: {value:'1', label:'Guest'}，大多数防弹方法是将其设置为选项列表项: myOptionsList[selectedIndex]

小开

当我按照上面所有的答案去做的时候，我突然想到，我应该写这个。

你必须设置道具 价值，而不是 默认值。 我花了几个小时来使用这个，阅读文档，他们提到要使用 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>
))}
小开

我想加点我的意见，用钩子,

您可以在 DropDown 中订阅道具

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;

然后在父组件中传递初始值或从状态更改值

<DropDown options={GenreOptions} required={true} defaultValue={recipeGenre === undefined ? recipe.genre : recipeGenre} handleChange={handleGenreChange}/>

然后，如果它是一个新的表单(没有默认值) ，你不必担心，因为 useEffect 会忽略设置任何东西

小开

2022示例中的 Redux 与 useSelector 反应

从2022年开始，response-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>

Use select 将用于默认值文本的目的

小开

在 useForm钩的 反应钩形式提供 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}


提交答案