十、React受控组件-表单书写

import React, { PureComponent } from "react";

export class App extends PureComponent {
  constructor() {
    super();
    this.state = {
      userName: "",
      password: "",
      isAgree: true,
      hobbies: [
        { text: "篮球", value: "篮球", isChecked: false },
        { text: "足球", value: "足球", isChecked: false },
        { text: "棒球", value: "棒球", isChecked: false },
      ],
      fruit: "lime",
    };
  }
  btnClick() {
    let result = this.state.hobbies
      .filter((item) => {
        return item.isChecked;
      })
      .map((item) => {
        return item.value;
      });
    console.log("爱好", result);
    console.log(this.state);
  }
  inputChange(e) {
    console.log(e);
    const value =
      e.target.type === "checkbox" ? e.target.checked : e.target.value;
    this.setState({
      [e.target.name]: value,
    });
  }

  hobbyChange(e, idx) {
    const newHobbies = [...this.state.hobbies];
    newHobbies[idx].isChecked = e.target.checked;
    this.setState({
      hobbies: newHobbies,
    });
  }
  render() {
    let { userName, password, isAgree, hobbies, fruit } = this.state;
    return (
      <div className="wrap">
        <form>
          <div>
            <label htmlFor="userName">
              用户名:
              <input
                name="userName"
                type="text"
                value={userName}
                onChange={(e) => this.inputChange(e)}
              />
            </label>
          </div>

          <div>
            <label htmlFor="password">
              密 码:
              <input
                name="password"
                type="text"
                value={password}
                onChange={(e) => this.inputChange(e)}
              />
            </label>
          </div>

          {/* checkbox */}
          <div>
            <label htmlFor="isAgree">
              <input
                id="isAgree"
                type="checkbox"
                name="isAgree"
                checked={isAgree}
                onChange={(e) => this.inputChange(e)}
              />
              同意协议
            </label>
          </div>

          {/* checkbox的多选 */}
          <div>
            爱好:
            {hobbies.map((item, index) => {
              return (
                <label htmlFor={item.value} key={item.value}>
                  <input
                    type="checkbox"
                    id={item.value}
                    checked={item.checked}
                    onChange={(e) => this.hobbyChange(e, index)}
                  />
                  {item.text}
                </label>
              );
            })}
          </div>

          <div>
            <select
              value={fruit}
              onChange={(e) => this.inputChange(e)}
              name="fruit"
            >
              <option value="grapefruit">葡萄柚</option>
              <option value="lime">酸橙</option>
              <option value="coconut">椰子</option>
              <option value="mango">芒果</option>
            </select>
          </div>
        </form>
        <button onClick={() => this.btnClick()}>按钮</button>
      </div>
    );
  }
}

export default App;