Я пытаюсь создать простой компонент в React для заполнения формы, но когда я запускаю его, консоль показывает мне ошибку too much recursion

Я уже пытаюсь удалить event.preventDefault() на handleSubmit, но это не сработало, я также пытаюсь инкапсулировать форму, используя {this.props.currentUser ? (<form>...</form>) : ""

Мой код следующий:

      <form onSubmit={this.handleSubmit.bind(this)}>
          <div className="form-group">
            <label htmlFor="productName">Product name:</label>
            <input
              className="form-control"
              type="text"
              ref="productName"
              required
            />
          </div>

          <div className="form-group">
            <label htmlFor="productName">Product description:</label>
            <input
              className="form-control"
              type="text"
              ref="productDescription"
              required
            />
          </div>

          <div className="form-group">
            <label htmlFor="productName">Minimum amount increase</label>
            <input
              className="form-control"
              type="text"
              ref="minIncrease"
              required
            />
          </div>
          <input className="btn btn-primary" type="submit" value="Submit" />
        </form>

И ручка Submit

handleSubmit(event) {
    event.preventDefault();

    // Find the txt field via React ref
    const productName = ReactDOM.findDOMNode(this.refs.productName);
    const productDescription = ReactDOM.findDOMNode(
      this.refs.productDescription
    );
    const minIncrease = ReactDOM.findDOMNode(this.refs.minIncrease);

    Meteor.call(
      "auctions.insert",
      productName,
      productDescription,
      minIncrease
    );

    Auctions.insert({
      productName, // product name
      productDescription, // product description
      minIncrease, // minimum increase
      value: 0, // initial value
      winner: "", // actual winner
      owner: Meteor.userId, // _id of logged in user
      username: Meteor.user().username, // username of logged in user
      createAt: new Date() // current time
    });

    // Clear form
    ReactDOM.findDOMNode(this.refs.productName).value = "";
    ReactDOM.findDOMNode(this.refs.productDescription).value = "";
    ReactDOM.findDOMNode(this.refs.minIncrease).value = "";
  }
1
beltran9c 14 Окт 2019 в 06:54

1 ответ

Лучший ответ

Я считаю, что ошибка заключалась в том, что в handleSubmit он отсутствовал .value.trim()

Правильный код:

handleSubmit(event) {
    event.preventDefault();

    // Find the txt field via React ref
    const productName = ReactDOM.findDOMNode(
      this.refs.productName
    ).value.trim();
    const productDescription = ReactDOM.findDOMNode(
      this.refs.productDescription
    ).value.trim();
    const minIncrease = ReactDOM.findDOMNode(
      this.refs.minIncrease
    ).value.trim();
...
}
0
beltran9c 14 Окт 2019 в 04:09