Question

这是一个ReactJS问题。

我无法重置表单的多个输入字段。

我的应用程序中有一个包含多个输入字段的表单，我使用onChange函数来获取用户输入，然后用this.state更新setState，然后复制所有this.state中的值与spread运算符一起创建，并创建一个存储这些复制值的新对象。最后，我将新对象传递给函数以供进一步使用（不相关）。我的代码问题是将对象传递给函数后无法清空字段。我尝试通过使用this.setState和event.target.reset()清除值来手动重置值，但两者均无效。

import React, { Component } from "react";

class AddFishForm extends Component {
  // Controlled state
  state = {
    name: "",
    price: "",
    status: "available",
    desc: "",
    image: ""
  };

  // Step 1: onChange: Update this.state
  updateFishState = event => {
    const { name, value } = event.target;
    this.setState({
      [name]: value
    });
  };

  // Step 2: onSubmit: Create Fish Object
  createFish = event => {
    // prevent refresh
    event.preventDefault();
    // copy values inside this.state and paste into new fish object
    const fish = {
      name: this.state.name,
      price: parseFloat(this.state.price),
      status: this.state.status,
      desc: this.state.desc,
      image: this.state.image
    };
    // pass new fish object into addFish() in App.js
    this.props.addFish(fish);
    // ! reset form (NOT WORKING) !
    event.currentTarget.reset();
  };

  render() {
    return (
      <form className="fish-edit" onSubmit={this.createFish}>
        <input
          name="name"
          value={this.state.name}
          type="text"
          placeholder="name"
          onChange={this.updateFishState}
        />
        <input
          name="price"
          value={this.state.price}
          type="text"
          placeholder="price"
          onChange={this.updateFishState}
        />
        <select
          name="status"
          //   Value equals to whichever option is selected
          value={this.optionsState}
          onChange={this.updateFishState}
        >
          <option value="available">Fresh!</option>
          <option value="unavailable">Sold Out!</option>
        </select>
        <textarea
          name="desc"
          value={this.state.desc}
          type="text"
          placeholder="Enter description..."
          onChange={this.updateFishState}
        />
        <input
          name="image"
          value={this.state.image}
          type="text"
          placeholder="image"
          onChange={this.updateFishState}
        />
        <button type="submit">Add Fish</button>
      </form>
    );
  }
}

export default AddFishForm;

我希望使用“ event.currentTarget.reset（）;”清除表单，但是输入在提交表单后仍会保留事件。帮助吗？

Answer 1

那不是React的工作方式。在React中创建受控输入时，其值受组件状态控制。您只需删除event.currentTarget.reset();并用简单的setState替换它即可重置表单值。

this.setState({
  name: "",
  price: "",
  status: "available",
  desc: "",
  image: ""
});

这将重置值，并且反应将重新呈现空白表格。

希望这会有所帮助！

Answer 2

由于您是通过React组件管理状态的，因此重置状态的最佳方法是创建一个将值重新设置为空字符串的函数。

form.reset()函数不起作用的原因是React限制了它们的表单事件类型：https://reactjs.org/docs/events.html#form-events（与reset函数的作用相比：How does form.reset() work?）。

我们只会得到onChange onInput onInvalid onSubmit

因此添加类似

reset() {
    this.setState({name: "", price: "", status: "available",desc: "",image: ""})
}

addFish之后调用此函数。

Answer 3

使用此setState方法更改状态并重新呈现组件

this.setState({
  name: "",
  price: "",
  status: "available",
  desc: "",
  image: ""
})

代替event.currentTarget.reset();

无法重置表单输入字段（React JS控制的组件）

3 个答案: