reactjs

Question 1

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>

그러나 문제는 내 드롭 다운에 내가 원하는 기본값이 없다는 것입니다. 내가 뭘 잘못하고 있니? 어떤 아이디어?

Question 2

다음과 같은 것이 필요하다고 생각합니다.

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

Question 3

defaultValue 매개 변수를 사용했습니다. 아래는 드롭 다운에서 옵션을 선택할 때 기본값을 업데이트하고 기본값을 얻는 방법에 대한 코드입니다.

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

Question 4

여기에 왔어요 경우 V2-선택 반응, 여전히 문제가 – 버전이 이제 객체로서 받아 value, defaultValue등

즉 value={{value: 'one', label: 'One'}}, 대신을 사용해보십시오 value={'one'}.

Question 5

비슷한 오류가 발생했습니다. 옵션에 값 속성이 있는지 확인하십시오.

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

그런 다음 처음에 selects 요소 값을 옵션 값과 일치시킵니다.

<select
    value={this.value} />

Question 6

@ 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
};

Question 7

다음과 같이 defaultInputValue 소품을 사용하십시오.

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

자세한 내용은 https://www.npmjs.com/package/react-select

Question 8

나는 이것을 직접 살펴보고 감속기 INIT 기능에서 기본값을 설정하기로 결정했습니다.

선택을 redux로 바인딩하는 경우 실제 값을 나타내지 않는 선택 기본값으로 ‘디 바인딩’하지 말고 대신 개체를 초기화 할 때 값을 설정하십시오.