antd 미리 채우기 태그 및 다중 선택

antd select에서 올바르게 작업 중입니다. 올바르게 채워 넣는 데 문제가 있습니다. 즉, initialValue 필드 데코레이터를 통해 선택 상자를 채울 수 있지만 문자열을 채우는 경우에는 보이지 않습니다. 가치를 지니고 있지만 (내가 이상적이지는 않지만 해결할 수있는 것), 더 중요하게는 옵션이 선택되지 않았거나 제거 된 경우 더 이상 표준 옵션과 달리 선택에서 사용할 수 없습니다. 선택 목록 옵션과 초기 값 (아래 코드에서 설명)에 모두 포함 할 수 있지만 중복 자동 입력이 가능하며 드롭 다운 목록에 두 번 나타납니다. 내가 뭘 잘못하고 있는거야? 미리 선택된의antd 미리 채우기 태그 및 다중 선택

는 Preperation 및 전체 옵션 목록

let defaultSelect = []; 
    let selectList = []; 
    for (var a = 0; a < this.props.myData.length; a++) { 
     //push all options to select list 
     selectList.push(<Select.Option key={this.props.myData[i].id} >{this.props.myData[i].name}</Select.Option>) 
     //this is my code to pre-populate options, by performing a find/match 
     let matchedTech = _.find(this.props.myDataPrepopulate, { id: this.props.myData[i].id }); 
     if (matchedTech) { 
      //notice I can push just the string name, not the name and the id value. 
      defaultSelect.push(this.props.myData[i].name); 
     } 
    }

선택 코드

{getFieldDecorator(row.name, { 
     initialValue: defaultSelect 
    })(
    <Select 
     tags 
     notFoundContent='none found' 
     filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0} 
     {selectList} 
    </Select> 
    )}

출처

2017-04-20 edencorbin

귀하의 게시 된 코드가 많은 구문 오류가 (좀 더 원래보다 더 현대적인 코드 패턴을 조금 사용하는 자유를했다) 내가 태그가 닫히지 않은 상태를 선택합니다. –

나는 당신이 실행되지 않는 코드를 게시하는 경우에도, 귀하의 질문을 이해 생각한다.

<Select.Option>은 일반 html <select><option/></select>처럼 작동합니다. 옵션에 값을 제공하려면 옵션을 식별하는 데 사용되는 value 속성이 필요합니다.

작동 예제는 을 참조하십시오. 귀하의 예제로 변환

결정적인 부분이 될 것입니다 :

this.props.myData.forEach(data => { 
    selectList.push(<Select.Option value={data.id} key={data.id}>{data.name}</Select.Option>); 
}); 

defaultSelect = this.props.myDataPrepopulate.map(data => data.id);

출처

2017-04-21 12:27:28

antd 미리 채우기 태그 및 다중 선택

답변

관련 문제