Inhaltsverzeichnis

Die Anleitung zu ReactJS Form

View more Tutorials:

Im  HTML managen die Elemente von  Form wie  <input>, <textarea>, <select> ihr Status selbst. Ihr Status kann wegen der Auswirkung des Benutzer ändern
Im Grunde werden die Daten von  Form zum  Server direkt geschickt wenn der Benutzer auf  Submit klickt. Aber wenn Sie das Verhalten und Daten vom  Form durch  React managen möchten, brauchen Sie die gegenseitige Beziehung zwichen die Wert von Elemente vom Form und den Status vom  React erstellen.

1- Form Input

Unter ist es das einfache Beispiel mit dem Element  <input>. Die Wert des Element wird aus this.state.fullName zugewiesen (Ein Status wird im  Component verwaltet). Wenn der Benutzer die Wert vom  <input> ändert, wird diese Wert in this.state.fullName durch die Methode  setState() aktualisiert.
form-input-example.jsx
class SimpleForm extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      fullName: ""
    };
  }

  handleSubmitForm(event) {
    alert("Full Name: " + this.state.fullName);
    event.preventDefault();
  }

  handleChange(event) {
    var value = event.target.value;

    this.setState({
      fullName: value
    });
  }

  render() {
    return (
      <form onSubmit={event => this.handleSubmitForm(event)}>
        <label>
          Full Name:
          <input
            type="text"
            value={this.state.fullName}
            onChange={event => this.handleChange(event)}
          />
        </label>
        <input type="submit" value="Submit" />
        <p>{this.state.fullName}</p>        
      </form>
    );
  }
}

// Render
ReactDOM.render(<SimpleForm />, document.getElementById("form1"));
 
form-input-example.html
<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <title>ReactJS Form</title>
      <script src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
      <script src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
      <script src="https://unpkg.com/[email protected]/babel.min.js"></script>
     
   </head>
   <body>
      <h3>Form Input:</h3>

      <div id="form1"></div>

      <script src="form-input-example.jsx" type="text/babel"></script>

   </body>
</html>

2- Form textarea

Im  HTML erlaubt das Element  <textarea> , vom Element <input> unterschiedlich, dem Benutzer die längere und mehr komplizierte Text einzugeben. Die Textinhalt vom <extarea> ist ihr Sub-Element (Dieses Sub-Element ist ein   #text Node).
<textarea>
  Hello there, this is some text in a text area
</textarea>
Im  React wird die Textinhalt  <textarea> durch das Attribut  value statt vom   #text Node eingestellt. Deshalb gibt es im  React keinen Unterschied zwischen die Gebrauchsweise vom  <textarea> und    <input>.
form-textarea-example.jsx
class EssayForm extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      content: ""
    };
  }

  handleSubmitForm(event) {
    alert("Textarea Content: " + this.state.content);
    event.preventDefault();
  }

  handleChange(event) {
    var value = event.target.value;

    this.setState({
      content: value
    });
  }

  render() {
    return (
      <form onSubmit={event => this.handleSubmitForm(event)}>
        <label>Content</label>
        <br />
        <textarea cols="45" rows="5"
          value={this.state.content}
          onChange={event => this.handleChange(event)} />
        <br />
        <input type="submit" value="Submit" />
        <p>{this.state.content}</p>
      </form>
    );
  }
}

// Render
ReactDOM.render(<EssayForm />, document.getElementById("form1"));
form-textarea-example.html
<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <title>ReactJS Form textarea</title>
      <script src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
      <script src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
      <script src="https://unpkg.com/[email protected]/babel.min.js"></script>

   </head>
   <body>
      <h3>Form textarea:</h3>

      <div id="form1"></div>

      <script src="form-textarea-example.jsx" type="text/babel"></script>

   </body>
</html>

3- Form select/option

form-select-example.jsx
class FlavorForm extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      favoriteFlavor: "coconut"
    };
  }

  handleSubmitForm(event) {
    alert("Favorite Flavor: " + this.state.favoriteFlavor);
    event.preventDefault();
  }

  handleChange(event) {
    var value = event.target.value;

    this.setState({
      favoriteFlavor: value
    });
  }

  render() {
    return (
      <form onSubmit={event => this.handleSubmitForm(event)}>
        <p>Pick your favorite flavor:</p>
        <select
            value={this.state.favoriteFlavor}
            onChange={event => this.handleChange(event)}>
          <option value="grapefruit">Grapefruit</option>
          <option value="lime">Lime</option>
          <option value="coconut">Coconut</option>
          <option value="mango">Mango</option>
        </select>

        <input type="submit" value="Submit" />
      </form>
    );
  }
}

// Render
ReactDOM.render(<FlavorForm />, document.getElementById("form1"));
form-select-example.html
<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <title>ReactJS Form select/option</title>
      <script src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
      <script src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
      <script src="https://unpkg.com/[email protected]/babel.min.js"></script>

   </head>
   <body>
      <h3>Form select/option:</h3>

      <div id="form1"></div>

      <script src="form-select-example.jsx" type="text/babel"></script>

   </body>
</html>

View more Tutorials: