リアクションアプリは要素にnullを返しますか？

Question

私はサインインフォームとサインアップフォームをレンダリングする反応モーダルを持っています。 フォームには、モーダルサインイン送信ボタンのIDによるボタンがあります。 私はそれは、このような要素が存在しないことを言って、型エラーを返す

document.getElementById('modal-sign-in-submit-button'); 

を行うと...

TypeError: document.getElementById(...) is null 

パッケージまたはそれがでているボタンを認識することで回避策がありますhtml？

これはコンソールでうまくいきますが、別のスクリプトでReactによってレンダリングされた要素にアクセスしようとすると、そのような要素は見つかりません。 （おそらくそれがまだ生成されていないためです）。以下は

あなたは「送信ボタン」のIDを持つボタンを作成しているようにそれは見えない

import React, { Component } from 'react'; 
import Modal from 'react-modal'; 

class SignInModalTrigger extends Component { 
    constructor() { 
    super(); 
    this.state = { 
    open: false 
    }; 
    this.openModal = this.openModal.bind(this); 
    this.closeModal = this.closeModal.bind(this);  
    } 

    openModal() { 
    this.setState({open: true}); 
    } 

    closeModal() { 
    this.setState({open: false}); 
    } 

    render() { 
    return (
     <div> 
     <a className="navbar-items" onClick={this.openModal} href="#">Sign in</a> 
     <Modal className="sign-in-modal" isOpen={this.state.open}> 
      <h1 className="modal-title">Sign in</h1> 
      <div className="modal-inner-form"> 
      <input className="modal-input" id="modal-sign-in-mail-input"  type="email" placeholder="Enter your email here"/> 
      <br /> 
      <br /> 
      <input className="modal-input" id="modal-sign-in-password-input"  type="password" placeholder="Enter your password here" pattern="(?=.*[A-Z]).{6,}"/> 
      <br /> 
      <br /> 
      <button className="modal-button" id="modal-sign-in-submit-button">Submit</button> 
      <br /> 
      <br /> 
      <button className="modal-button" onClick={this.closeModal}>Close</button> 
      </div> 
     </Modal> 
     </div> 
    ); 
    } 
} 

export default SignInModalTrigger; 

Answer 1

質問がありましたが、私が望むものを達成するための解決策が見つかりました。 クラス自体の中に関数を作成し、それをコンストラクタにバインドします。

ので、何かのように、

constructor() { 
    super(); 
    this.state = { 
    open: false 
    }; 
    this.openModal = this.openModal.bind(this); 
    this.closeModal = this.closeModal.bind(this); 
    this.submit = this.submit.bind(this); 
} 

submit() { 
    const submit = document.getElementById('modal-sign-up-submit-button'); 
    const email = document.getElementById('modal-sign-up-mail-input').value; 
    const pass = document.getElementById('modal-sign-up-password-input').value; 
    const promise = firebase.auth().createUserWithEmailAndPassword(email, pass); 
    promise.then(e => window.location.href="index.html"); 
    promise.catch(e => console.log(e.message)); 

    firebase.auth().onAuthStateChanged(firebaseUser => { 
    if(firebaseUser) { 
     this.setState({open: false}); 
     console.log("hi"); 
    } 
    }); 
} 

render() { 
    return(
    <button className="modal-button" id="modal-sign-up-submit-button" onClick={this.submit}>Submit</button> 
) 
} 

Answer 2

、一部のソースです。あなたは存在しないボタンを探しています。次のように入力してみてください：あなたはDOMの要素を識別することができますフレームワークを探しているなら

document.getElementById('modal-sign-in-submit-button'); 

、私はdevの目的のためのjQueryをお勧めします。 JQueryは重く、無意味なので、使用しないようにしてください。

this.openModal & this.closeModalにラムダ式または太字の矢印関数を使用することをお勧めします。これにより、.bind（）を使わずに 'this'のコンテキストを保持することができます。明白なメリットは、コードの可読性を向上させ、明示的に 'this'をバインドすることです。ここで

は一例です：

openModal() => { this.setState({ open: true }); 
closeModal() => { this.setState({ open: false }); 

私はそれが役に立てば幸い！