フォームのエラーが反応しました

Question

私の流星反復アプリでこのバグに苦しんでいます。

私はイベントを作成するフォームを持っていますが、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'); 
} 

と私のhtml：

<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> 

残念ながら、このエラーが解決されるまで、私はプロジェクトを進めることができないので、誰かが助け場合、私は本当に幸せになります私！ベスト

、

Answer 1

element.matches機能がお使いの対象要素のためにサポートされていないようですが、私は流星を使用していないとして、私は、これは流星ネイティブスクリプトによって引き起こされるかどうかは明らかでは、未だ

、そうです。

しかし、このコードを追加してこのエラーを回避するための独自のプロトタイプを追加することで、これを確認できます。

if (!Element.prototype.matches) { 
Element.prototype.matches = 
    Element.prototype.matchesSelector || 
    Element.prototype.mozMatchesSelector || 
    Element.prototype.msMatchesSelector || 
    Element.prototype.oMatchesSelector || 
    Element.prototype.webkitMatchesSelector || 
    function(s) { 
     var matches = (this.document || this.ownerDocument).querySelectorAll(s), 
      i = matches.length; 
     while (--i >= 0 && matches.item(i) !== this) {} 
     return i > -1;    
    }; 
} 

SOURCES

私は、これはあなたの問題を解決したいと考えています。