web-dev-qa-db-ja.com

React-フォーム送信後の入力値のクリア

私はかなりばかげた問題を抱えています。最初のReactアプリケーションを作成していますが、フォームを送信した後、入力値をクリアできないという小さな問題が発生しました。この問題をグーグルで試したところ、同様のスレッドがいくつか見つかりましたが、これを解決できませんでした。入力の値を空の文字列に変更するためだけに、コンポーネント/アプリケーションの状態を変更したくありません。 onHandleSubmit()関数の入力値をクリアしようとしましたが、エラーが発生しました。

「未定義のプロパティ「値」を設定できません」。

My SearchBarコンポーネント：

import React, { Component } from "react";

class SearchBar extends Component {
  constructor(props) {
    super(props);

    this.state = {
      city: ""
    };

    this.onHandleChange = this.onHandleChange.bind(this);
    this.onHandleSubmit = this.onHandleSubmit.bind(this);
  }

  render() {
    return (
      <form>
        <input
          id="mainInput"
          onChange={this.onHandleChange}
          placeholder="Get current weather..."
          value={this.state.city}
          type="text"
        />
        <button onClick={this.onHandleSubmit} type="submit">
          Search!
        </button>
      </form>
    );
  }

  onHandleChange(e) {
    this.setState({
      city: e.target.value
    });
  }

  onHandleSubmit(e) {
    e.preventDefault();
    const city = this.state.city;
    this.props.onSearchTermChange(city);
    this.mainInput.value = "";
  }
}

export default SearchBar;
javascriptformsreactjsinputsubmit
19
TommyVee

input値がthis.state.cityによって決定される制御されたコンポーネントがあります。そのため、送信すると、状態をクリアする必要があり、入力を自動的にクリアします。

onHandleSubmit(e) {
    e.preventDefault();
    const city = this.state.city;
    this.props.onSearchTermChange(city);
    this.setState({
      city: ''
    });
}
25
Panther

入力フィールドは制御された要素であるため、状態を変更せずに入力フィールドの値を直接変更することはできません。

また

onHandleSubmit(e) {
    e.preventDefault();
    const city = this.state.city;
    this.props.onSearchTermChange(city);
    this.mainInput.value = "";
  }

mainInputはidであるため、this.mainInputは入力を参照しません。入力への参照を指定する必要があります

<input
      ref={(ref) => this.mainInput= ref}
      onChange={this.onHandleChange}
      placeholder="Get current weather..."
      value={this.state.city}
      type="text"
    />

現在の状態で最良の方法は、状態をクリアして入力値をクリアすることです

onHandleSubmit(e) {
    e.preventDefault();
    const city = this.state.city;
    this.props.onSearchTermChange(city);
    this.setState({city: ""});
  }

ただし、何らかの理由でフォームが送信された場合でも値を状態のままにしたい場合は、入力を制御しないでください。

<input
      id="mainInput"
      onChange={this.onHandleChange}
      placeholder="Get current weather..."
      type="text"
    />

状態onChangeおよびonSubmitの値を更新し、refを使用して入力をクリアします

 onHandleChange(e) {
    this.setState({
      city: e.target.value
    });
  }

  onHandleSubmit(e) {
    e.preventDefault();
    const city = this.state.city;
    this.props.onSearchTermChange(city);
    this.mainInput.value = "";
  }

そうは言っても、状態を変更せずに維持する意味はないので、最初のオプションは進むべき道です。

8
Shubham Khatri

this.mainInputは実際には何も指していません。制御されたコンポーネントを使用しているため（つまり、入力の値は状態から取得されているため）、this.state.cityをnullに設定できます。

onHandleSubmit(e) {
  e.preventDefault();
  const city = this.state.city;
  this.props.onSearchTermChange(city);
  this.setState({ city: '' });
}
3
topher

onHandleSubmit関数で、次のように状態を{city: ''}に再度設定します。

this.setState({ city: '' });
1
mllduran

上記の答えは正しくありません。すべての天気予報が実行されるか、送信が成功しません。エラーを受け取るエラーコンポーネントを作成し、状態にエラーがないかどうかを確認する必要があります。 ...

.then（）を使用します

例：

 const onSubmit =  e => {
e.preventDefault();
const fd = new FormData();
fd.append("ticketType", ticketType);
fd.append("ticketSubject", ticketSubject);
fd.append("ticketDescription", ticketDescription);
fd.append("itHelpType", itHelpType);
fd.append("ticketPriority", ticketPriority);
fd.append("ticketAttachments", ticketAttachments);
newTicketITTicket(fd).then(()=>{
  setTicketData({
    ticketType: "IT",
    ticketSubject: "",
    ticketDescription: "",
    itHelpType: "",
    ticketPriority: ""
  })
})

};

0
Mazer Rakham