web-dev-qa-db-ja.com

getElementById in React

現時点でこのエラーを取得しています：

Uncaught TypeError: Cannot read property 'value' of null

以下のレンダリング関数でこれを呼び出します：

<input type="submit" className="nameInput" id="name" value="cp-dev1" onClick={this.writeData}/>

私もここで呼んでみました

componentWillMount: function(){
        var name = document.getElementById('name').value;
      },

入力テキストフィールドのIDを取得してその値を読み取り、それがnullでないことを確認するにはどうすればよいですか？

要素を読み取ろうとするとDOMが読み込まれると思うので、なぜnullなのか

javascriptreactjsnullgetelementbyid
14
The worm

これは、DOMがロードされたときに呼び出される関数であるため、componentDidMountライフサイクルに関数を含める必要があります。

refsを使用してDOM要素にアクセスします

<input type="submit" className="nameInput" id="name" value="cp-dev1" onClick={this.writeData} ref = "cpDev1"/>

  componentDidMount: function(){
    var name = React.findDOMNode(this.refs.cpDev1).value;
    this.someOtherFunction(name);
  }

Reactでdom要素にアクセスする方法の詳細については、この回答を参照してください

13
Shubham Khatri

コンポーネントが次のような場合、diffを実行し、document.getElementById('name')コードを条件内に配置する必要がある場合があります。

// using the new hooks API
function Comp(props) {
  const { isLoading, data } = props;
  useEffect(() => {
    if (data) {
      var name = document.getElementById('name').value;
    }
  }, [data]) // this diff is necessary

  if (isLoading) return <div>isLoading</div>
  return (
    <div id='name'>Comp</div>
  );
}

Diffが実行されない場合、nullを取得します。

0
HarshvardhanSharma