하는 방법 설정 기본 가치에 반응하는 선택

내가 있는 문제점을 사용하여 반응을 선택합니다. 내가 사용하는 돌아오는 양식을 나는've 내 반응을 선택합 구성 요소는 호환으로 돌아오는 양식입니다. 는 코드는 다음과 같습니다:

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>

하지만 문제는 나의 드롭다운는 기본값이 아니합니다. 내가 무엇'm doing wrong? 어떤 아이디어가?

locrizak
편집된 질문26일 10월 2017 в 1:21
프로그래밍
reactjs react-select default-value
19일 4월 2017 в 12:24
아직 보기가 없습니다.
질문에 대한 의견 (6)
해결책

난 당신 같은 뭔가가 필요 this:

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}
  />
);
Artem Bernatskyi
편집된 답변20일 12월 2018 в 5:48
해설 (5)

내가 사용하는 기본값 매개 변수는 아래 코드는 방법을 내가 달성하는 기본값뿐만 아니라 기본 값을 업데이트 옵션을 선택할 때에 드롭다운.

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

당신이've 올 여기에 대한 반응을 선택-v2,그리고 여전히는 데 문제가-전 2 단지 개체로value,기본값,etc.

즉,사용하려고value={{값:&#39;중 하나는&#39;,레이블:&#39;중 하나는&#39;}}대신value={&#39;중 하나는&#39;}.

해설 (0)

가 비슷한 오류가 있습니다. 확인한 귀하의 옵션에 값을 가지 특성이 있습니다.

 {item}

다음과 일치 선택한 요소는 가치 처음 옵션에 값입니다.

<select 
    value={this.value} />
해설 (2)

장에@이삭-pak's,대답을 전달하려는 경우 기본 가치의 구성 요소로서,소품,당신은 그것을 저장할 수 있는 상태에서 componentDidMount()수명 주기도록 하는 방법은 기본적으로 선택되는 첫 시간입니다.

참고,나는've 업데이트 다음 코드를 더 완전하고 사용하는 빈 문자열의 초기 값으로 따 comment.

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.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
};
Dan Meigs
편집된 답변2일 7월 2019 в 12:51
해설 (3)

나는 그냥 갔을 통해 이 자신을 선택하는 설정의 기본값에서 흡진기 INIT 기능입니다.

에 바인딩하는 경우에는 귀하의 선택으로 돌아오는 다음 최고의하지 않'de-bind'그것은 선택의 기본 가치는't 을 나타내는 실제 값을 대신 설정 값을 초기화할 때는 객체입니다.

해설 (0)

자동 선택의 가치에서 선택합니다.

[![입력한 이미지는 여기에 설명][1]][1] 


<div className="form-group">
    Contact Method
    <select id="contactmethod" className="form-control"  value={this.state.contactmethod || ''} onChange={this.handleChange} name="contactmethod">
    URL
    Phone
    SMS
해설 (0)

하는 경우이 옵션은 다음과 같이

var options = [
  { value: 'one', label: 'One' },
  { value: 'two', label: 'Two' }
];

의{props.입력합니다.value}일치해야 하나의&#39;값&#39;에서당신의{props.옵션}

미,props.입력합니다.값을해야&#39;중 하나는&#39;또는&#39;두&#39;

해설 (0)

를 사용하지 않는 경우는 워 양식을 사용하고 있는 지역 상태에 대한 변경 내용은 다음의 반응을 선택합 구성 요소는 다음과 같습니다:

class MySelect extends Component {

constructor() {
    super()
}

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

render() {
  <select
       ...
       value={this.state.selectedValue}
       ...
  />
)}
해설 (0)