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
});
}}
/>
답변
여기에 왔어요 경우 V2-선택 반응, 여전히 문제가 – 버전이 이제 객체로서 받아 value, defaultValue등
즉 value={{value: 'one', label: 'One'}}, 대신을 사용해보십시오 value={'one'}.
답변
비슷한 오류가 발생했습니다. 옵션에 값 속성이 있는지 확인하십시오.
<option key={index} value={item}> {item} </option>
그런 다음 처음에 selects 요소 값을 옵션 값과 일치시킵니다.
<select
value={this.value} />
답변
@ isaac-pak의 답변을 확장하면 기본값을 prop의 구성 요소에 전달하려면 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
};
답변
다음과 같이 defaultInputValue 소품을 사용하십시오.
<Select
name="name"
isClearable
onChange={handleChanges}
options={colourOptions}
isSearchable="true"
placeholder="Brand Name"
defaultInputValue="defaultInputValue"
/>
답변
나는 이것을 직접 살펴보고 감속기 INIT 기능에서 기본값을 설정하기로 결정했습니다.
선택을 redux로 바인딩하는 경우 실제 값을 나타내지 않는 선택 기본값으로 ‘디 바인딩’하지 말고 대신 개체를 초기화 할 때 값을 설정하십시오.
