Question

我想在上传后清除输入字段并提交表单。

我检查了一些文档，在提交表格后说可以返回初始状态。

这是我的代码

 state = {
    firstname: "",
    lastname: "",
    email: "",
    file: null
  };

  onDrop = e => {
    this.setState({ file: e.target.files[0] });
    console.log({ file: e.target.files[0] });
  };

  handleChange = e => {
    this.setState({ [e.target.id]: e.target.value });
  };
  handleSubmit = async e => {
    e.preventDefault();
    console.log(this.state);
    const formData = new FormData();
    formData.append("file", this.state.file);
    formData.append("upload_preset", process.env.REACT_APP_UPLOAD_PRESET);

    const response = await axios.post(
      `https://api.cloudinary.com/v1_1/${process.env.REACT_APP_CLOUD_NAME}/image/upload`,
      formData
    );

    await this.props.addPerson({
      variables: {
        firstname: this.state.firstname,
        lastname: this.state.lastname,
        email: this.state.email,
        image: response.data.url
      },
      refetchQueries: [{ query: getperson }]
    });

    this.setState({ firstname: " ", lastname: "", email: " ", file: null }); **this is where i retutn the initial state after submitting the form, but it did not work**
  };

这是我的表单设置

  <React.Fragment>
        <div>
          <form id="addPerson" onSubmit={this.handleSubmit}>
            <div className="field">
              <label> Firstname </label>
              <input type="text" id="firstname" onChange={this.handleChange} />
            </div>
            <div className="field">
              <label> Lastname </label>
              <input type="text" id="lastname" onChange={this.handleChange} />
            </div>
            <div className="field">
              <label> Email </label>
              <input type="email" id="email" onChange={this.handleChange} />
            </div>
            <input type="file" onChange={this.onDrop} />
            <button>Add Person</button>
          </form>
        </div>
      </React.Fragment>

Answer 1

这是行不通的，因为您的输入不受react的完全控制。如果要控制这些输入，则需要指定value属性，如下所示：

<input type="text" id="firstname" value={this.state.firstname} onChange={this.handleChange}/>
<input type="text" id="lastname" value={this.state.lastname} onChange={this.handleChange}/>

请注意，file input的反应始终不受控制（请参见documentation），因此您需要使用参考手动将其重置：

 constructor() {
   this.fileRef = React.createRef();
   ...
 }

 handleSubmit = async e => {

   // Reset the file input
   this.fileRef.current.value = '';
 };

 render() {
   ...
   <input type="file" ref={this.fileRef} onChange={this.onDrop} />
   ...
 }

Answer 2

您尚未在具有状态值的html输入中设置value属性。

由于在表单元素上设置了value属性，因此显示的value将始终为this.state.value，从而使React状态成为真相的来源。

由于handleChange每次击键都运行以更新React状态，因此显示的值将随着用户的输入而更新。

对于受控组件，每个状态突变都将具有关联的处理程序功能。这样可以轻松修改或验证用户输入。

有关更多详细信息，请检查here。

使用以下代码，

    <React.Fragment>
        <div>
        <form id="addPerson" onSubmit={this.handleSubmit}>
            <div className="field">
            <label> Firstname </label>
            <input type="text" id="firstname" value={this.state.firstname} onChange={this.handleChange} />
            </div>
            <div className="field">
            <label> Lastname </label>
            <input type="text" id="lastname" value={this.state.lastname} onChange={this.handleChange} />
            </div>
            <div className="field">
            <label> Email </label>
            <input type="email" id="email" value={this.state.email} onChange={this.handleChange} />
            </div>
            <input type="file" onChange={this.onDrop} />
            <button>Add Person</button>
        </form>
        </div>
    </React.Fragment>

希望这对您有帮助！

提交表单后反应清除输入字段

2 个答案: