9:フォーム(フォーム)

19203 ワード
React 正式な書類 テキストリンク

form

  • HTMLフォーム要素は、フォーム要素自体が内部状態を持っているため、Reactの他のDOM要素とは少し異なります.
    • 例えば、
  • では、純HTMLでは、フォームはname入力を受け入れる.
    • <form>
  <label>
    Name:
    <input type="text" name="name" />
  </label>
  <input type="submit" value="Submit" />
</form>
  • このフォームは、ユーザーがフォームを送信すると、新しいページにジャンプする基本的なHTMLフォーム操作を実行します.
  • Reactでは、同じ動作をしたい場合はそのまま使用できます.
  • しかし、多くの場合、JavaScript関数を使用してフォームのコミットを処理し、ユーザーがフォームに入力したデータにアクセスできるようにするのは便利です.
  • の標準的なやり方は、「制御素子」と呼ばれる技術を用いることである.

    • せいぎょようそ

  • HTMLでは、、<textarea>、作成します.
    • たとえば、次のHTMLでは、
  • というフルーツドロップダウンリストが作成されます.
    • <select>
  <option value="grapefruit">Grapefruit</option>
  <option value="lime">Lime</option>
  <option selected value="coconut">Coconut</option>
  <option value="mango">Mango</option>
</select>
  • オプションが選択されているため、Coconutオプションは初期値になります.
  • Reactは、選択ツリーではなく、最上位の選択ラベルにバリューツリーを使用します.
  • で更新するだけなので、制御素子での使用がより便利です.
    • 次の
  • の例を確認し、比較します.
    • class FlavorForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: 'coconut'};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  handleSubmit(event) {
    alert('Your favorite flavor is: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Pick your favorite flavor:
          <select value={this.state.value} onChange={this.handleChange}>
            <option value="grapefruit">Grapefruit</option>
            <option value="lime">Lime</option>
            <option value="coconut">Coconut</option>
            <option value="mango">Mango</option>
          </select>
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}
    総じて,,<textarea>および
    JDBC実習
    継承とGeneric Programming