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}
/>
);
#EDIT 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}
/>
);
default Value 파라미터를 사용했습니다.다음은 디폴트값을 취득한 코드와 드롭다운에서 옵션을 선택했을 때의 디폴트값을 갱신한 코드입니다.
<Select
name="form-dept-select"
options={depts}
defaultValue={{ label: "Select Dept", value: 0 }}
onChange={e => {
this.setState({
department: e.label,
deptId: e.value
});
}}
/>
문제가 있는 - 2는 를 react-select v2로만 . - 는 2 는 2 는 。value,defaultValue 등등.
'아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아,value={{value: 'one', label: 'One'}}""가 ""입니다value={'one'}.
저도 비슷한 오류가 있었어요.옵션에 값 속성이 있는지 확인하십시오.
<option key={index} value={item}> {item} </option>
그런 다음 처음에 선택한 요소 값을 옵션 값과 일치시킵니다.
<select
value={this.value} />
@isaac-pak의 응답에 따라 프로포트의 컴포넌트에 기본값을 전달할 경우 componentDidMount() 라이프 사이클 메서드로 저장하여 기본값이 처음 선택되도록 할 수 있습니다.
코멘트의 초기값으로서 빈 문자열을 사용하기 위해서, 보다 완전하게 하기 위해서, 다음의 코드를 갱신했습니다.
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
name="name"
isClearable
onChange={handleChanges}
options={colourOptions}
isSearchable="true"
placeholder="Brand Name"
defaultInputValue="defaultInputValue"
/>
자세한 것은, https://www.npmjs.com/package/react-select 를 참조해 주세요.
위의 답들을 다 따라하다 보니 생각이 나서, 이 글을 써야겠다.
DefaultValue가 아닌 Prop 값을 설정해야 합니다.몇 시간 동안 이것을 사용하고, 설명서를 읽었는데, Default Value를 사용하도록 언급되어 있었습니다만, 동작하지 않습니다.정확한 방법이 될 것입니다.
options=[{label:'mylabel1',value:1},{label:'mylabel2',value:2}]
seleted_option={label:'mylabel1',value:1}
<Select
options={options}
value={selected_option}/>
valueobject :
<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}
/>
저는 방금 이 문제를 검토했고 리듀서 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 형식을 사용하지 않고 로컬 상태를 변경에 사용하는 경우 react-select 구성 요소는 다음과 같습니다.
class MySelect extends Component {
constructor() {
super()
}
state = {
selectedValue: 'default' // your default value goes here
}
render() {
<Select
...
value={this.state.selectedValue}
...
/>
)}
이런 걸 자주 쓰고 있어요.
이 예제의 소품 기본값
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>
}
<select value={stateValue}>에 값이 확인합니다.stateValue선택해주세요.
몇 가지 포인트:
defaultValue는 초기 렌더링에 대해 작동하며 순차 렌더링 경로에서는 업데이트되지 않습니다.defaultValue를 손에 넣은 후 Select를 렌더링해야 합니다.
defaultValue는 다음과 같은 개체 또는 개체 배열 형식으로 정의해야 합니다.
{value:'1', label:'Guest'}하는 것입니다.myOptionsList[selectedIndex]
defaultValueselected
, 「」를 합니다.hidden:
<option defaultValue hidden>
{'--'}
</option>
{options.map(opt => (
<option key={opt} value={opt.replaceAll(/[,'!?\s]/gi, '')}>
{opt}
</option>
))}
»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" },
]}
/>
또는
defaultValue react-select 표시
<Select
defaultValue={{ label: "20", value: 20 }
optons={[
{ value: "20", label: "20" },
{ value: "30", label: "30" },
{ value: "25", label: "25" },
]}
/>
옵션이 다음과 같으면
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>
선택 태그의 값 속성 사용
value={this.state.contactmethod || ''}
그 해결책은 나에게 효과가 있다.
- 생성자에 기본 옵션 텍스트에 대한 상태 속성 생성
- 디폴트 옵션 값 걱정 없음
- 렌더 함수에 옵션 태그를 추가합니다.상태 및 3진 식을 사용하여만 표시
- 옵션이 선택되었을 때 처리할 함수를 만듭니다.
이 이벤트 핸들러 함수의 기본값 상태를 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> ) } }
여기에 내 의견을 더하고 싶었고, 훅스를 이용해서,
드롭 다운에서 소품을 구독할 수 있습니다.
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는 설정 내용을 무시하므로 걱정할 필요가 없습니다.
태그에서 엄선된 소품을 사용할 수 있을 것 같습니다.
<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 옵션이 있습니다.get Option Label 및 get Option Value를 사용하는 경우 기본값을 설정한 옵션 파라미터와 일치시켜야 합니다.
예를들면
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"
})}
/>
defaultValue를 {label:"this", 값: "that}
default Value({title:"this", _id: "that")로 mine을 설정해야 했습니다.
<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 selected는 기본값 텍스트의 목적을 충족합니다.
사용자 정의 레이블에 대해 정의할 경우 react-select에서 다음을 수행합니다.
<Select
getOptionLabel={({ name }) => name}
/>
이것은 다음과 같이 간단하게 할 수 있습니다.
반응 선택에서 초기 옵션 값
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' }
];
리액트 선택 시,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 normal에서도 사용할 수 있습니다.
언급URL : https://stackoverflow.com/questions/43495696/how-to-set-a-default-value-in-react-select
'sourcecode' 카테고리의 다른 글
| 로컬 SQL Server 인스턴스에 대한 관리자 액세스 권한을 자신에게 부여하려면 어떻게 해야 합니까? (0) | 2023.04.09 |
|---|---|
| 반응 npm start not work : '사용 가능한 chokidar 버전이 없습니다.' (0) | 2023.04.04 |
| angularjs - ng-switch가 ng-model을 바인드하지 않음 (0) | 2023.04.04 |
| 각 서비스 함수에 $scope 삽입() (0) | 2023.04.04 |
| 필드별 MongoDB Aggregate가 존재합니다. (0) | 2023.04.04 |