React key cant 요소에 더하기

Question

Im이 새로운 질문에 부끄러워하지만 필자는 왜 li 요소에 키를 바인딩하려고 할 때 Icant가 DOM을 렌더링 한 후 그것을 찾지 못하는지 알지 못합니다. 콘솔

<ul><br /> 
    <li>I dont know why</li><br /> 
    <li>cant find the key</li><br /> 
</ul><br /> 

:처럼 보이는 .
그리고 click 이벤트에서 e.target.getAttribute ('key')를 사용하여 'undefined'를 얻었습니다. 여기
내 코드 (간단하여 ToDoList) :

class Write extends React.Component { 
 
    constructor(props){ 
 
     super(props); 
 
     this.handle=this.handle.bind(this); 
 
    } 
 
    handle(){ 
 
     const text=document.getElementById('todoIn').value; 
 
     this.props.onWriteDown(text); 
 
    } 
 
    render(){ 
 
    return (
 
    <div> 
 
    <input type="text" id="todoIn" /> 
 
    <button onClick={this.handle}>confirm</button> 
 
    </div> 
 
    ); 
 
    } 
 
    } 
 

 
class Todolist extends React.Component { 
 
    constructor (props) { 
 
     super(props); 
 
     this.n=0; 
 
     this.state={list:[]}; 
 
     this.todolist=[]; 
 
     this.handle=this.handle.bind(this); 
 
     this.handle_del=this.handle_del.bind(this); 
 
    } 
 
    handle (m) { 
 
     this.todolist.push({thing:m,vid:this.n++}); 
 
     this.setState({list:this.todolist}); 
 
    } 
 
    handle_del (e) { 
 
     var d = this.todolist.forEach((v,i)=>{ 
 
     if(v.vid==e.target.getAttribute('key')){ 
 
      return i; 
 
     } 
 
     }); 
 
     this.todolist.splice(d,1); 
 
     this.setState({list:this.todolist}); 
 
    } 
 
    render(){ 
 
     var that = this; 
 
     var todo=[]; 
 
     //here I create React Element for each todo and bind some attribute BUT ONLY CLICK EVENT is ACCESSIBLE.I JUST WONDER... 
 
     this.state.list.forEach(function(v,i,a){ 
 
     let temp=<li key={v.vid.toString()} onClick={that.handle_del} >{v.thing}</li>; 
 
     todo.push(temp); 
 
     }); 
 
     return(
 
     <div> 
 
     <Write onWriteDown={this.handle} /> 
 
     <ul> 
 
     {todo} 
 
     </ul> 
 
     </div> 
 
    ); 
 
    } 
 
    } 
 

 
    ReactDOM.render(
 
     <Todolist />, 
 
    document.getElementById('root') 
 
    );

<div id="root"></div>

Answer 1

key 때문에 구성 요소를 추가, 변경 또는 제거 된 알 반작용 내부적으로 사용됩니다. 또한 키가 전달되지 않습니다.

자세한 내용은 ReactJS의 문서를 참조하십시오.

https://facebook.github.io/react/docs/lists-and-keys.html#keys

Answer 2

같이, 당신이 그것을 통과하지 않는 key 속성에 액세스를 시도해서는 안되며 오직 객체에 대한 내부 참조로 사용되는 Hemerson의 대답했다.

대신에, 당신은 그래서 당신의 코드를 작성할 수 있습니다 :

---

let id = v.vid.toString(); 
let temp=<li key={id} onClick={() => that.handle_del(id)}>{v.thing}</li>; 

---

handle_del (id) { 
    var d = this.todolist.forEach((v,i)=>{ 
    if(v.vid==id){ 
     return i; 
    } 
    }); 
    this.todolist.splice(d,1); 
    this.setState({list:this.todolist}); 
}