React key cant要素に追加

Question

この質問には恥ずかしがりやがっかりするが、なぜ私はli要素にキーをバインドしようとすると、IcantはDOMをレンダリングした後にそれを見つけるのか分からない。コンソールで

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

：のように見えます 。
クリックイベントでe.target.getAttribute（ 'key'）を使用して '未定義'になりました。
ここに私のコード（シンプル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}); 
}