在Meteor React项目中提交表单时出现event.target [matches]错误

问题描述

我正在为这个错误而苦苦挣扎.这是我的代码:

I am struggling with this bug. Here's my code:

很长，所以这是一个简短的版本:我有一个创建事件的表单，我希望handleSubmit()处理错误消息，如果没有，则将事件添加到db.我确实导入了{Events}，实际上，在进行一些更改之前，该表单已经起作用.当我运行它时，我收到一条错误消息:Uncaught TypeError:event.target [matches]不是一个函数.感谢您对此的关注.

It's long, so here's a short version: I have a form to create an event, I want handleSubmit() to handle error messages and if there are none, add event to db. I do import {Events}, in fact the form worked before I made some changes. When I run it, I get an error message: Uncaught TypeError: event.target[matches] is not a function. Thanks for anyone looking into this.

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>

推荐答案

因此，代码存在两个问题:

So there are two problems with the code:

1. setState是异步的.函数执行后解析.解决方法:先let error = false开头，然后将error = true与setState调用一起设置.

1. setState is async. It resolves after the function executes. Workaround: let error = false at the beginning and then set error = true together with setState call.

空对象是真实的.多亏了error变量，我们才可以将条件更改为if(!error).或if(error) {return}-这也可以.

Empty objects are truthy. Thanks to error variable, we can just change the condition to if(!error). Or do if(error) {return} - this also works.

哦，错误消息来自chrome扩展程序.糟透了chrome并没有告诉您错误消息来自扩展程序-至少我不认为它是错误消息.

Oh, and the error message was from a chrome extension. Sucks that chrome doesn't tell you that an error message came from an extension - at least I don't think it does.

最好

这篇关于在Meteor React项目中提交表单时出现event.target [matches]错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！