提交表單后反應清除輸入字段

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}/>

請注意，react 中的file input始終不受控制（請參閱文檔），因此您需要使用參考手動重置它：

 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 狀態，因此顯示的值將隨着用戶鍵入而更新。

使用受控組件，每個狀態變化都會有一個關聯的處理程序函數。 這使得修改或驗證用戶輸入變得簡單。

有關更多詳細信息，請查看此處。

使用以下代碼，

    <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>

希望能幫到你 ！！！