在 Meteor React 项目中提交表单时的 event.target[matches] 错误答案

【问题标题】：event.target[matches] error on form submit in Meteor React project在 Meteor React 项目中提交表单时的 event.target[matches] 错误
【发布时间】：2017-12-11 13:41:54
【问题描述】：

我正在努力解决这个错误。这是我的代码：

它很长，所以这里有一个简短的版本：我有一个创建事件的表单，我希望 handleSubmit() 处理错误消息，如果没有，则将事件添加到 db.我确实导入了 {Events}，实际上表单在我进行一些更改之前就已经工作了。当我运行它时，我收到一条错误消息：Uncaught TypeError: event.target[matches] is not a function。感谢任何对此进行调查的人。

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>

【问题讨论】：

我不久前发布了一个答案。这是一场虚惊，我仍然对此感到困扰......有人吗？
您是否尝试过从构造函数中删除行this.handleSubmit = ...，为了能够调用this.handleSubmit，这不是必需的。
我认为这不是问题所在。我想我已经接近了。它是 setState 是异步的和空对象是真实的组合。错误消息来自 chrome 扩展。 :(

标签： javascript forms reactjs meteor

【解决方案1】：

所以代码有两个问题：

setState 是异步的。它在函数执行后解决。解决方法：在开头设置let error = false，然后将error = true 与setState 调用一起设置。
空对象是真实的。感谢error 变量，我们可以将条件更改为if(!error)。或者if(error) {return} - 这也有效。

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

最好的，

【讨论】：