私のIDはnullを返し続けます

Question

私はReactJSを勉強していて、チェックボックスをオンにすると私のIDをconsole.logにしようとしています。私はこれを行うために複数の方法を試して、私はエラー、未定義、またはnullのいずれかを取得します。それがレンダリングされるとき、spanタグは独自のidを持ちます。どのように関数から参照するのですか？最も可能性が高いそのid属性値が文字通りidに設定されませんでした：あなたは要素を見つけることができなかったのはなぜ

import React from "react"; 
import * as ToDoAction from "../actions/ToDoAction"; 

export default class ToDoLi extends React.Component{ 

    constructor(){ 
     super(); 
    } 

    deleteToDo(){ 
     let id = document.getElementById('id'); 
     console.log('I am here at ' + id); 
    } 

    render(){ 

     return (
      <div> 
       <li onChange={this.deleteToDo.bind(this)}><input type="checkbox"/><span id={this.props.id} className="m-l-10">{this.props.text}</span></li> 
      </div> 
      ) 
    } 
} 

Answer 1

。このコンポーネントのレンダリング方法を指定する必要があることを確認します。

しかし、この方法は非常に推奨されています.1つはDOMを直接混乱させるべきではありません。

あなたが代わりにやるべき

：

1. をあなたが本当にDOM要素を取得するための、いくつかの理由のために必要がある場合 - refを使用する方法を学ぶ：代わりにあなたを介して探検することもできますhttps://facebook.github.io/react/docs/refs-and-the-dom.html

2. ハンドラに渡されるイベント。そのためにdeleteToDo(e)としてあなたのハンドラを宣言し、それ以外の場合はe

3. を検査 - this.propsを、他のすべてのプロパティが用意されてい反応し、あなたはそれらのいずれかを使用することができます。