Question

我正在努力解决这个问题。这是我的代码：

很长，所以这里有一个简短的版本：我有一个表单来创建一个事件，我想要handleSubmit（）来处理错误消息，如果没有，则向db添加事件。我确实导入了{Events}，实际上在我做了一些更改之前表单已经工作了。当我运行它时，我收到一条错误消息：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>

Answer 1

因此代码存在两个问题：

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

哦，错误消息来自chrome扩展程序。糟透了，Chrome并没有告诉你一条错误信息是来自扩展程序 - 至少我认为它没有。

最佳，

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

1 个答案: