는 선택 매핑 문제

Question

내 프로젝트에 react-select을 사용하고 반응하고 나는 그런 map 내에서 사용하고 있습니다

renderItems() { 
    this.props.items.map(item => (
    <Select 
     id="options" 
     value={this.state.optionSelected} 
     onChange={this.onChangeOption} 
     options={this.showOptions()} 
    /> 
); 
} 

제대로 내 모든 항목에 대한 내 모든 옵션을 표시하지만 지금은 얻을 수 없다 내가 그 옵션은 모든 항목에 대해 변화하고, 하나의 상품에 옵션을 선택하면

이

내가 지금까지 한 일입니다 ... 기본적으로 ... 선택에 대해

을 제거 :

onChangeOption(e) { 
    this.setState({ optionSelected: e.value }); 
} 

변경할 수있는 옵션 만 변경하려면 어떻게해야합니까?

감사

Answer 1

당신은 당신의 선택의 모든 구성 요소에 대해 동일한 변경 핸들러를 사용하여 다음의 모든 구성 요소 선택에 대해 동일한 상태 값을 설정합니다. 이 문제를 해결하려면 선택한 구성 요소를 자체 상태 및 변경 이벤트를 처리하는 컨테이너 구성 요소와 분리하거나 각 선택 구성 요소에 고유 한 상태 값을 제공해야합니다.

예

renderItems() { 
    this.props.items.map(item => (
    <Select 
     id="options" 
     value={this.state.optionSelected[item.id]} 
     onChange={(event) => this.onChangeOption(event, item.id)} 
     options={this.showOptions()} 
    /> 
); 
} 

onChangeOption(event, itemId) { 
    this.setState((prevState) => { 
    const prevStateClone = Object.assign({}, prevState); 
    prevStateClone.optionSelected[itemId] = event.target.value; 
    return prevStateClone; 
    }); 
} 

Answer 2

cloning the object to a new object을 시도하거나이 optionSelected 클래스 인 경우, 당신은 그것을 클론 생성자를 구현할 수 있습니다와 같은 :

export class optionSelectedClass { 
    myfield = ''; 

    constructor(fields){ 
     this.myField = fields.myField; 
    } 
} 

또는

export class optionSelectedClass { 
    myfield = ''; 

    constructor(fields){ 
     for (let f in fields) { 
      if (!this[f]) { 
       this[f] = fields[f]; 
      } 
     } 
    } 
} 

Answer 3

대신 optionSelected 문자열 변수를 만들려면 상태로 배열로 만듭니다. 이제 다음을 수행하십시오.

renderItems() { 
    this.props.items.map(item, index => (
    <Select 
     id="options" 
     value={this.state.optionSelected[index]} 
     onChange={(selectedValue) => this.onChangeOption(selectedValue, index)} 
     options={this.showOptions()} 
    /> 
); 
} 

onChangeOption(selectedValue, index) { 
    const optionSelected = this.state.optionSelected.slice() // slicing to get new copy of optionSelected instead of referencing to old one which causes mutation 
    optionSelected[index] = selectedValue 
    this.setState({optionSelected: optionSelected}) 
} 

하나의 변수를 사용하여 선택 상자의 값을 저장하는 것이 었습니다. 따라서 누군가가 변경되면 모든 선택 상자가 반영됩니다.