React에 매핑하고 상호 작용하도록 만들고 싶었던 객체가 있습니다. 사용자가 요소 옆의 'X'버튼을 클릭하면 클릭 한 요소의 키를 console.log합니다.
개체는 다음과 같습니다.
var obj = {
person1: {
name: 'iggy',
superPower: 'awesomeness',
favDonut: 'chocolate'
},
person2: {
name: 'iggy2',
superPower: 'stupendousness',
favDonut: 'glazed'
},
person3: {
name: 'iggy3',
superPower: 'amazingness',
favDonut: 'chocolate sprinkles'
}
};
반복은 다음과 같습니다.
X chocolate
X glazed
X chocolate sprinkles
의 x를 클릭하면 의 부모 개체이기 때문에 glazedconsole.log person2에 저장 glazed합니다. x를 클릭 chocolate sprinkles하면 console.log person3합니다.
다음은 바이올린입니다 : https://jsfiddle.net/iggyfiddle/b9rreoje/2/
내가 알아 내려는 방법은 getPersonName기능입니다. 사용자가 x를 클릭하고 관련 개체 키를 console.log하는 가장 좋은 방법은 무엇입니까?
그렇게하는 대신을 Object.values원할 Object.keys것이므로 해당 키에 액세스 할 수 있습니다.
getPersonName: function(person){
console.log(person);
}
const donutValues = Object.keys(obj).map((key, index) => <li key={index}><a href="#" onClick={() => this.getPersonName(key)}>X</a> {obj[key].favDonut} </li>);
업데이트 된 바이올린 : https://jsfiddle.net/b9rreoje/3/
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다