BinaryDevelop
  1. ホーム
  2. reactjs

[解決済み] フォーム入力欄のクリアとリセット

2023-03-18 09:44:02

質問

様々な入力フィールドと、送信とキャンセルのための2つのボタンを含むフォームがあります。 

<form id="create-course-form">
  <input type="text" name="course_Name" ref="fieldName">
  <input type="text" name="course_org" ref="fieldOrg">
  <input type="text" name="course_Number" ref="fieldNum">

  <input type="submit" name="saveCourse" value="Create">
  <input type="button" name="cancelCourse" value="cancel" onClick={this.cancelCourse}>
</form>

私が欲しいのは、キャンセルボタンがクリックされたときに、すべての入力を空にすることです。今までは、各入力の ref プロパティを使用することです。 

cancelCourse(){
  this.refs.fieldName.value="";
  this.refs.fieldorg.value="";
  this.refs.fieldNum.value="";
}

しかし、私はそれぞれを別々に空にすることなく、入力フィールドを空にしたいです。以下のようなものが欲しいです（jQuery）。 $('#create-course-form input[type=text]').val('');

どのように解決するには？

ここでの答えは、あなたの入力が以下のものであるかどうかによります。 制御された または 非制御 . この点についてよくわからない、あるいはもっと情報が必要だという場合は、公式のドキュメントにある 制御されたコンポーネント そして 制御不能なコンポーネント . ありがとうございます @Dan-Esparza に感謝します。

また、以下の点にご注意ください。 での文字列リテラルは ref は非推奨です。 . 代わりに標準のコールバックメソッドを使用してください。

制御不能なフィールドを持つフォームをクリアする

各フォームフィールドを個別にクリアするのではなく、フォーム全体をクリアすることができます。 

cancelCourse = () => { 
  document.getElementById("create-course-form").reset();
}

render() {
  return (
    <form id="create-course-form">
      <input />
      <input />
      ...
      <input />
    </form>
  );
}

もしフォームに id 属性がない場合は ref も使えます。 

cancelCourse = () => { 
  this.myFormRef.reset();
}

render() {
  return (
    <form ref={(el) => this.myFormRef = el;}>
      <input />
      <input />
      ...
      <input />
    </form>
  );
}

コントロールフィールドを持つフォームをクリアする

コントロールされたフォームフィールドを使用している場合、値がどのように状態に保存されるかに応じて、フォーム内の各コンポーネントを明示的にリセットする必要があるかもしれません。

個別に宣言されている場合は、それぞれを明示的にリセットする必要があります。 

cancelCourse = () => { 
  this.setState({
    inputVal_1: "",
    inputVal_2: "",
    ...
    inputVal_n: "",
  });
}

render() {
  return (
    <input value={this.state.inputVal_1} onChange={this.handleInput1Change}>
    <input value={this.state.inputVal_2} onChange={this.handleInput2Change}>
    ...
    <input value={this.state.inputVal_n} onChange={this.handleInputnChange}>
  );
}

以下はデモです。 

class MyApp extends React.Component {
  constructor() {
    super();
    this.state = {
      inputVal_1: "",
      inputVal_2: "",
      inputVal_3: "",
      inputVal_4: "",
      inputVal_5: "",
      inputVal_6: "",
      inputVal_7: "",
      inputVal_8: "",
      inputVal_9: "",
      inputVal_10: ""
    };
  }
  
  handleInput1Change = (e) => {
    this.setState({inputVal_1: e.target.value});
  }
  
  handleInput2Change = (e) => {
    this.setState({inputVal_2: e.target.value});
  }
  
  handleInput3Change = (e) => {
    this.setState({inputVal_3: e.target.value});
  }
  
  handleInput4Change = (e) => {
    this.setState({inputVal_4: e.target.value});
  }
  
  handleInput5Change = (e) => {
    this.setState({inputVal_5: e.target.value});
  }
  
  handleInput6Change = (e) => {
    this.setState({inputVal_6: e.target.value});
  }
  
  handleInput7Change = (e) => {
    this.setState({inputVal_7: e.target.value});
  }
  
  handleInput8Change = (e) => {
    this.setState({inputVal_8: e.target.value});
  }
  
  handleInput9Change = (e) => {
    this.setState({inputVal_9: e.target.value});
  }
  
  handleInput10Change = (e) => {
    this.setState({inputVal_10: e.target.value});
  }
  
  cancelCourse = () => { 
    this.setState({
      inputVal_1: "",
      inputVal_2: "",
      inputVal_3: "",
      inputVal_4: "",
      inputVal_5: "",
      inputVal_6: "",
      inputVal_7: "",
      inputVal_8: "",
      inputVal_9: "",
      inputVal_10: ""
    });
  }
  
  render() {
    return (
      <form>
        <input value={this.state.inputVal_1} onChange={this.handleInput1Change} />
        <input value={this.state.inputVal_2} onChange={this.handleInput2Change} />
        <input value={this.state.inputVal_3} onChange={this.handleInput3Change} />
        <input value={this.state.inputVal_4} onChange={this.handleInput4Change} />
        <input value={this.state.inputVal_5} onChange={this.handleInput5Change} />
        <input value={this.state.inputVal_6} onChange={this.handleInput6Change} />
        <input value={this.state.inputVal_7} onChange={this.handleInput7Change} />
        <input value={this.state.inputVal_8} onChange={this.handleInput8Change} />
        <input value={this.state.inputVal_9} onChange={this.handleInput9Change} />
        <input value={this.state.inputVal_10} onChange={this.handleInput10Change} />
        <input type="submit" name="saveCourse" value="Create" />
        <input type="button" name="cancelCourse" value="cancel" onClick={this.cancelCourse} />
      </form>
    );
  }
}

ReactDOM.render(<MyApp />, document.getElementById("app"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

しかし、これをより簡単に行う方法があります。むしろ n ステートプロパティと n イベントハンドラ、各入力に対して1つずつ、いくつかの巧妙なコーディングで、コードを劇的に減らすことができます。

コンストラクタでは空のオブジェクトを宣言し、入力値を保持するために使用します。入力ハンドラは 1 つだけ使用し、値を変更したい入力要素のインデックスを渡します。つまり、個々の入力の値は、入力し始めた瞬間に生成されるのです。

フォームをリセットするには、入力オブジェクトを再び空に戻すだけです。

入力の値は this.state.inputVal[i] . もし i が存在しない場合（まだ何も入力していない）、その値は（nullではなく）空の文字列であることが望ましい。 

cancelCourse = () => { 
  this.setState({inputVal: {}});
}

render() {
  return (
    <form>
      {[...Array(n)].map(
        (item, i) => <input value={this.state.inputVal[i] || ""} onChange={this.handleInputChange.bind(this, i)} />
      )}
    </form>
  );
}

以下はデモです。 

class MyApp extends React.Component {
  constructor() {
    super();
    this.state = {
      inputVal: {}
    };
  }
  
  handleInputChange = (idx, {target}) => {
    this.setState(({inputVal}) => {
      inputVal[idx] = target.value;
      return inputVal;
    });
  }
  
  cancelCourse = () => { 
    this.setState({inputVal: {}});
  }
  
  render() {
    return(
      <form>
        {[...Array(10)].map(  //create an array with a length of 10
          (item, i) => <input value={this.state.inputVal[i] || ""} onChange={this.handleInputChange.bind(this, i)} />  //bind the index to the input handler
        )}
        <input type="submit" name="saveCourse" value="Create" />
        <input type="button" name="cancelCourse" value="cancel" onClick={this.cancelCourse} />
      </form>
    );
  }
}

ReactDOM.render(<MyApp />, document.getElementById("app"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します