2017-07-07 10 views
0

私はこのバグに苦しんでいます。event.target Meteor Reactプロジェクトのフォーム提出時にエラーが発生しました

私はイベントを作成するフォームを持っていますが、handleSubmit()はエラーメッセージを処理し、存在しない場合はdbにイベントを追加します。私は{イベント}をインポートしますが、実際にフォームが機能する前に変更を加えました。私が実行すると、エラーメッセージが表示されます。Uncaught TypeError:event.target [matches]は関数ではありません。これを見ていただきありがとうございます。

export default class Create extends React.Component { 
constructor(props) { 
    super(props); 
    this.state = { 
     error: {} 
    } 

    this.handleSubmit = this.handleSubmit.bind(this); 
} 
handleSubmit(evt) { 
    evt.preventDefault(); 

    this.setState({error: {}}); 
    let title = this.refs.title.value; 
    if (!title) { 
    this.setState((prevState) => { 
     let newState = prevState; 
     newState.error.title = 'Title has to be filled up.'; 
     return newState; 
    }) 
    } 
    let description = this.refs.description.value; 
    if (!description) { 
    this.setState((prevState) => { 
     let newState = prevState; 
     newState.error.description = 'Description has to be filled up.'; 
     return newState; 
    }) 
    } 


    if (!this.state.error) { 
     Events.insert({title: title, description: description}); 
     this.props.history.push('/home'); 
    } 

と:

 <form onSubmit={this.handleSubmit} noValidate> 

     <input ref="title" type="text" name="title" placeholder="Title" 
     style={this.state.error.title ? {borderBottomColor: 'red'} : undefined}/> 
     <div className="errorText">{this.state.error.title}</div> 

     <input ref="description" type="text" name="description" placeholder="Description" 
     style={this.state.error.description ? {borderBottomColor: 'red'} : undefined}/> 
     <div className="errorText">{this.state.error.description}</div> 

     <button type="submit" className="btn btn-success">Create new event</button> 
    </form> 
+0

私は少し前に回答を掲載しました。それは虚偽の警報だった、私はまだこれによって盗まれている...誰でも? –

+0

'this.handleSubmit = ...'行をコンストラクタから削除しようとしましたが、this.handleSubmitを呼び出すためには不要です。 – tomr

+0

私はそれが問題だとは思わない。私は近くになっていると思う。これは、非同期であるsetStateと真実である空のオブジェクトの組み合わせです。そしてエラーメッセージはクロム拡張から来ます。 :( –

答えて

0

ように、コードには二つの問題があります。

  1. SETSTATEは非同期です。関数の実行後に解決されます。回避策:最初にlet error = falseを呼び出し、setState呼び出しと一緒にerror = trueを設定します。

  2. 空のオブジェクトは真実です。 error変数のおかげで、条件をif(!error)に変更できます。またはif(error) {return}を実行する - これも動作します。

ああ、エラーメッセージはクロム拡張からのものです。 Chromeは、エラーメッセージが内線番号から来たものであるとは言いません。少なくとも、私はそうは思わない。

ベスト、

関連する問題