Javascript
 Computer >> コンピューター >  >> プログラミング >> Javascript

React.jsでのフォームの操作

単純なhtmlフォームでは、フォーム要素は内部的に価値を維持し、フォーム送信ボタンで送信します。

例

<!DOCTYPE html>
<html>
<head>
<title>Form Example</title>
</head>
<body>
<form>
   <label>
      User Name:
      <input type="text" name="username" />
   </label>
   <input type="submit" value="Submit Form" />
</form>
</body>
</html>

上記の例では、usernameという単純な入力があり、フォームの送信時にその値を受け取ることができます。 htmlフォームのデフォルトの動作は、新しいページ、つまり投稿フォーム送信ページに移動することです。

ただし、フォームデータも検証できるフォーム送信ハンドラーのJavaScript関数があると、さらにメリットがあります。検証により、関連するフィードバックがユーザーに提供されます。

Reactには、制御されたコンポーネントと呼ばれるフォーム送信を処理する手法があります。

htmlと同様に、input、textareaなどの要素は独自の状態を維持し、ユーザーの操作に基づいて更新します。 Reactでは、可変フィールドは状態オブジェクトとともに保持されます。

制御されたコンポーネントのReactのアプローチでのユーザー名フィールドの処理-

class UserForm extends React.Component {
   constructor(props) {
      super(props);
      this.state = {username: ''};
      this.handleChange = this.handleChange.bind(this);
      this.handleSubmit = this.handleSubmit.bind(this);
   }
   handleChange(event) {
      this.setState({username: event.target.value});
   }
   handleFormSubmit(event) {
      console.log('username: ' + this.state.username);
      event.preventDefault();
   }
   render() {
      return (
         <form onSubmit={this.handleFormSubmit}>
            <label>
               Name:
               <input type="text" value={this.state.username} onChange={this.handleUsernameChange} />
            </label>
            <input type="submit" value="Submit" />
         </form>
      );
   }
}

ここに、状態フィールドのユーザー名を更新するためのonChangeハンドラー関数があります。

formSubmitでは、送信されたユーザー名を表示するために、ブラウザにコンソールログインが表示されています。

その他の制御されたタイプのコンポーネントは、textarea、select tag、ラジオボタンなどです。

ファイルタイプのように、本質的に読み取り専用であり、フォームの送信時にのみ値を取得する、制御されていないコンポーネントがいくつかあります。

単一のJS関数で複数のフォーム入力を処理する-

handleInputChange(event) {
   const value = event.target.value;
   const name = event.target.name;
   this.setState({
      [name]: value
   });
}

状態の開始を使用してフィールドにデフォルト値を提供することにより、フィールドにnull値を使用する制御された入力を回避する必要があります。

Reactでのフォーム処理に関する本格的なソリューションについては、formikなどのサードパーティライブラリを使用して実行できます。検証、ユーザーへのフィードバックなどを使用するのは簡単です。


  1. Pryでの例外の処理

    あなたが私のようなら、あなたはRailsコンソールをよく使います。そして今では、PryがRailsコンソールに起こる最良のことであることに誰もが同意していると思います...まあ、これまで。 組み込みのこじ開けは、昔ながらのIRBに比べて、例外を除いて作業をはるかに簡単にするいくつかの非常に優れた機能です。 完全なバックトレースを表示 Pry（またはそのことについてはIRB）で例外が発生すると、バックトレースの短縮バージョンが表示されます。通常はこれで十分ですが、常にそうとは限りません。 pryでは、wtf -vコマンドを使用して、最新の例外の完全なバックトレースを確認できます。 -vフラ

  2. phpPress、goPress、rubyPress、nodePressを使用したフォームの処理

    フラットファイルシステムを使用するWebサイトができたので、ユーザーからフィードバックを受け取りたいと思います。 Disqusの追加は、すべてのJavaScriptコードがページに追加されるため簡単ですが、それはあなたが望むものではありません。あなたは彼らがあなたに直接メールを送ることができるようにしたいので、あなたは彼らにだけ返信することができます。 ユーザーのコンピュータから直接メールを送信するすべてのJavaScriptシステムを作成することもできますが、その場合、メールはスパマーに公開され、コードから取得して他のスパマーに販売することができます。したがって、サーバー上でメールアドレ