Question

我是React的新手并且感到害羞地问这个问题，但我不知道为什么当我尝试将键绑定到li元素时，Icant在渲染DOM之后找到它。看起来像：

  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')
   );

在控制台中

我得到了未定义的＃39;在点击事件中使用e.target.getAttribute（＆＃39; key＆＃39;）这是我的代码（一个简单的todolist）：

＆＃13;

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

＆＃13;

csv

＆＃13;

Answer 1

key在内部使用，因此React知道添加，更改或删除了哪些组件。钥匙也没有通过。

有关更多信息，请查看ReactJS的文档。

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

Answer 2

正如在赫默森的回答中所说，你不应该试图访问key属性，它不会被传递，并且仅用作内部参考对象

相反，您可以编写代码：

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});
}

反应键不能添加到元素

2 个答案: