第八节-受控组件

表单的数据受控于 state的组件 称之为受控组件

• state：是唯一数据源
• 控制表单操作并且同步 state

const hobbiesData = [
  {
    name: '钢琴',
    value: 'piano'
  },
  {
    name: '旅游',
    value: 'travel'
  },
  {
    name: '跑步',
    value: 'running'
  },
  {
    name: '唱歌',
    value: 'singing'
  }
];
class App extends React.Component {
  state = {
    username: '',
    password: '',
    intro: '',
    isChecked: true,
    hobbies: ['piano']
  };
  handleChange(e) {
    this.setState({
      [e.target.name]: e.target.value
    });
  }
  handleReset(e) {
    e.preventDefault();
    this.setState({
      username: '',
      password: '',
      intro: '',
      isChecked: true,
      hobbies: ['piano']
    });
  }
  handleSexChange(isChecked) {
    this.setState({
      isChecked: isChecked
    });
  }
  handleHobbies(e) {
    if (e.target.checked) {
      this.setState({
        hobbies: [...this.state.hobbies, e.target.value]
      });
    } else {
      this.setState({
        hobbies: this.state.hobbies.filter((item) => item !== e.target.value)
      });
    }
  }
  handleSub(e) {
    e.preventDefault();
    console.log(this.state.hobbies);
  }
  render() {
    const { username, password, intro, isChecked, hobbies } = this.state;
    return (
      <form>
        <p>
          用户名：
          <input
            type="text"
            placeholder="用户名"
            name="username"
            value={username}
            onChange={this.handleChange.bind(this)}
          />
        </p>
        <p>
          密码：
          <input
            type="password"
            placeholder="密码"
            name="password"
            value={password}
            onChange={this.handleChange.bind(this)}
          />
        </p>
        <p>
          <textarea
            name="intro"
            rows="10"
            placeholder="描述"
            value={intro}
            onChange={this.handleChange.bind(this)}
          ></textarea>
        </p>
        <p>
          男：
          <input
            type="radio"
            name="sex"
            value="male"
            checked={isChecked}
            onChange={this.handleSexChange.bind(this, true)}
          />
          女：
          <input
            type="radio"
            name="sex"
            value="famale"
            onChange={this.handleSexChange.bind(this, false)}
          />
        </p>
        <div>
          {hobbiesData.map((item) => {
            return (
              <span key={item.value}>
                {item.name}:
                <input
                  type="checkbox"
                  name="hobbies"
                  value={item.value}
                  checked={hobbies.includes(item.value)}
                  onChange={this.handleHobbies.bind(this)}
                />
                |
              </span>
            );
          })}
        </div>
        <p>
          <button onClick={this.handleSub.bind(this)}>登录</button>
          <button onClick={this.handleReset.bind(this)}>重置</button>
        </p>
      </form>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('app'));