javascript - run - event.target[matches] error en el formulario submit en el proyecto Meteor React

meteor schema

Question

Estoy luchando con este error. Aquí está mi código:

Es largo, así que aquí hay una versión corta: tengo un formulario para crear un evento, quiero que handleSubmit () maneje los mensajes de error y, si no hay ninguno, agrega el evento a db. Importo {Eventos}, de hecho, el formulario funcionó antes de realizar algunos cambios. Cuando lo ejecuto, recibo un mensaje de error: UnEdge TypeError: event.target [matches] no es una función. Gracias a todos por investigar esto.

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'');
  }

y:

     <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

Entonces hay dos problemas con el código:

1. setState es asincrónico. Se resuelve después de que se ejecuta la función. Solución: let error = false al principio y luego configure error = true junto con setState call.

2. Los objetos vacíos son verdad. Gracias a error variable de error , podemos simplemente cambiar la condición a if(!error) . O hazlo if(error) {return} - esto también funciona.

Ah, y el mensaje de error era de una extensión de cromo. Apesta que Chrome no te dice que un mensaje de error vino de una extensión, al menos no creo que lo haga.

Mejor,