react中表单的使用

单个使用input（内有注释）

import React, { Component } from "react";
//单个input方法，比较麻烦，扩展性极低
class Index extends Component {
  constructor(props) {
    super(props);
    this.state = {
      uname: "",
      pword: "",
     
    };
  }
  setUname(e) {
    let value = e.target.value;
    this.setState({
      uname: value,
    });
  }
  setPword(e) {
    let value = e.target.value;
    this.setState({
      pword: value,
    });
  }

  render() {
    const {  uname, pword } = this.state;

    return (
      <div>
        <h1>input基础认识</h1>

        <ul>
          <li>
            <label htmlFor="username">用户名: {uname}</label>
            {/* 如果label跟input不是包含关系，但是你想要点击用户名三个字让input也被选中则需要在label上加上htmlFor=...还有input上加上对应的id */}
            <div className="label_ctrl">
              <input
                id="username"
                type="text"
                placeholder="请输入内容"
                value={uname}
                onChange={(e) => {
                  this.setUname(e);
                }}
              />
              {/* <div className="tip"></div> */}
            </div>
          </li>
          <li>
            <label>密码:{pword}</label>
            <div className="label_ctrl">
              <input
                type="password"
                placeholder="请输入内容"
                autoComplete="new-passowrd"
                value={pword}
                onChange={(e) => {
                  this.setPword(e);
                }}
              />
            </div>
          </li>
          <br />
         
        </ul>
      </div>
    );
  }
}

export default Index;

多个input时

import React, { Component } from "react";
//多个input绑定方法，扩展性很高
// 第一步
// 设置state 默认值
// 第二步
// 写jsx 中 input
//     绑定value
//     绑定onChange事件
// 如果多个input则
//     增加name属性
class Index extends Component {
  constructor(props) {
    super(props);
  }
  state = {
    uname: "",
    pword: "",
    age: "",
  };

  setAge(e) {
    let name = e.target.name;
    let value = e.target.value;
    this.setState({
      [name]: value,
      //通过input框上面的name属性来拿到对应的值
    });
  }
  render() {
    const { uname, pword, age } = this.state;

    return (
      <div>
        <h1>input基础认识</h1>
        <ul>
          <li>
            <label>用户名: {uname}</label>
            <div className="label_ctrl">
              <input
                type="text"
                placeholder="请输入内容"
                value={uname}
                name="uname"
                onChange={(e) => {
                  this.setAge(e);
                }}
              />
              {/* <div className="tip"></div> */}
            </div>
          </li>
          <li>
            <label>密码:{pword}</label>
            <div className="label_ctrl">
              <input
                type="password"
                placeholder="请输入内容"
                autoComplete="new-passowrd"
                value={pword}
                name="pword"
                onChange={(e) => {
                  this.setAge(e);
                }}
              />

              {/* <div className="tip"></div> */}
            </div>
          </li>
          <li>
            <label>密码:{age}</label>
            <div className="label_ctrl">
              <input
                type="password"
                placeholder="请输入内容"
                autoComplete="new-passowrd"
                name="age"
                value={age}
                onChange={(e) => {
                  this.setAge(e);
                }}
              />

              {/* <div className="tip"></div> */}
            </div>
          </li>
        </ul>
      </div>
    );
  }
}

export default Index;

处理较为复杂的数据时

import React, { Component } from "react";
//单个input方法，比较麻烦，扩展性极低
class Index extends Component {
  constructor(props) {
    super(props);
    this.state = {
      uname: "",
      pword: "",
      web1908: {
        uname: "",
        pword: "",
      },
    };
  }

  _setValue(e) {
    let value = e.target.value;
    let name = e.target.name;
    const { web1908 } = this.state;
    web1908[name] = value;
    this.setState({ web1908 });
  }
  setUname(e) {
    let value = e.target.value;
    this.setState({
      uname: value,
    });
  }
  setPword(e) {
    let value = e.target.value;
    this.setState({
      pword: value,
    });
  }

  render() {
    const { web1908, uname, pword } = this.state;

    return (
      <div>
        <h1>input基础认识</h1>

        <ul>
          <li>
            <label htmlFor="username">用户名: {uname}</label>
            {/* 如果label跟input不是包含关系，但是你想要点击用户名三个字让input也被选中则需要在label上加上htmlFor=...还有input上加上对应的id */}
            <div className="label_ctrl">
              <input
                id="username"
                type="text"
                placeholder="请输入内容"
                value={uname}
                onChange={(e) => {
                  this.setUname(e);
                }}
              />
              {/* <div className="tip"></div> */}
            </div>
          </li>
          <li>
            <label>密码:{pword}</label>
            <div className="label_ctrl">
              <input
                type="password"
                placeholder="请输入内容"
                autoComplete="new-passowrd"
                value={pword}
                onChange={(e) => {
                  this.setPword(e);
                }}
              />

              {/* <div className="tip"></div> */}
            </div>
          </li>
          <br />
          <li>
            <label>用户名: {web1908.uname}</label>
            {/* 如果label跟input不是包含关系，但是你想要点击用户名三个字让input也被选中则需要在label上加上htmlFor=...还有input上加上对应的id */}
            <div className="label_ctrl">
              <input
                type="text"
                placeholder="请输入内容"
                name="uname"
                value={web1908.uname}
                onChange={(e) => {
                  this._setValue(e);
                }}
              />
              {/* <div className="tip"></div> */}
            </div>
          </li>
          <li>
            <label>密码:{web1908.pword}</label>
            <div className="label_ctrl">
              <input
                type="password"
                placeholder="请输入内容"
                autoComplete="new-passowrd"
                name="pword"
                value={web1908.pword}
                onChange={(e) => {
                  this._setValue(e);
                }}
              />

              {/* <div className="tip"></div> */}
            </div>
          </li>
        </ul>
      </div>
    );
  }
}

export default Index;