React - フォーム提出後の入力値をクリアする

Question

こんにちはそこにStackoverflowers、

私はかなりばかげた問題があります。私は最初のReactアプリケーションを作成中ですが、フォームを提出した後、入力値をクリアすることができない小さな問題が発生しました。この問題を見つけようとしましたが、ここに似たスレッドがいくつか見つかりましたが、解決できませんでした。入力の値を空の文字列に変更するだけで、コンポーネント/アプリケーションの状態を変更する必要はありません。私はonHandleSubmit関数で入力の値をクリアしようとしましたが、 "未定義のプロパティ 'value'を設定できません"というエラーが出ました。

私はどんな助けもありません。前もって感謝します！ :)

マイコード：

マイ検索バーコンポーネント：

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; 

Answer 1

inputの値がthis.state.cityで決定されている制御されたコンポーネントを使用しています。だからあなたが提出すると、自動的にあなたの入力をクリアするあなたの状態をクリアする必要があります。

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

Answer 2

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

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

this.mainInput mainInputがidであるため、入力を参照していない、あなたは最良の方法は、あなたの現在の状態では、入力

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

へのREFを指定する必要があります状態をクリアして入力値をクリアする

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 = ""; 
    } 

私は、状態を変更しないように注意していないので、最初の選択肢は進まなければなりません。

Answer 3

実際には何も指していません。あなたは（すなわち入力の値が状態から得られる）制御コンポーネントを使用しているので、あなたはnullにthis.state.cityを設定することができます。

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

Answer 4

あなたonHandleSubmit機能では、このように再び{city: ''}に自分の状態を設定します。

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