React系列-受控组件

前置知识

受控组件的状态由开发者维护，非受控组件的状态由组件自身维护;

由state来决定表单里面的数据,由表单事件处理函数来更改state,使用这样的方式来控制表单输入行为取值的方式的组件

受控组件定义：由state来决定表单内部的数据，由表单的事件处理函数来更改state的方式

react负责渲染表单组件；并且仍然控制用户后续输入时发生的变化 只有react控制输入的元素称为受控组件;

看一个demo:

import ReactDOM from 'react-dom';
import React from 'react'

class App extends React.Component {
  //受控组件: 使用1/2的控制表单输入行为取值的方式的组件
  //1.state是表单的唯一数据源
  state = {
    username: '',
    password: ''
  }

  usernameChange(e) {
    // e.target --->事件源对象input--->e.target.value 为对应的值
    //由state来决定表单里面的数据,由表单事件处理函数来更改state,
    //2.控制表单操作并且同步state
    this.setState({
      username: e.target.value
    }, () => {
      console.log(this.state.username)
    })
  }

  passwordChange(e) {
    this.setState({
      password: e.target.value
    }, () => {
      console.log(this.state.password)
    })
  }

  submitChange(e) {
    e.preventDefault();
    const {username, password} = this.state;
    console.log(username, password)
  }

  render() {
    const {username, password} = this.state;//解构
    return (
      <form>
        <p>
          username：
          <input
            type="text"
            placeholder="username"
            value={username}
            onChange={this.usernameChange.bind(this)}
          />
        </p>
        <p>
          password：
          <input
            type="password"
            placeholder="this is pasword"
            value={password}
            onChange={this.passwordChange.bind(this)}
          />
        </p>
        <p>
          <button onClick={this.submitChange.bind(this)}>login</button>
        </p>

      </form>
    )
  }
}


ReactDOM.render(
  <App/>,
  document.body
)

数据的流动:
初始数据:state-->数据解构之后,表单可以拿来利用--->点击按钮/向表单中输入数据--->触发表单事件处理函数--->setState来控制表单输入行为(一般通过e.target来获取相对应的事件源对象)

代码简化:

class App extends React.Component {

  state = {
    username: '',
    password: ''
  }

  Change(e) {
    this.setState({
      [e.target.name]: e.target.value
    })
  }

  submitChange(e) {
    e.preventDefault();
    const {username, password} = this.state;
    console.log(username, password)
  }

  render() {
    const {username, password} = this.state;//解构
    return (
      <form>
        <p>
          username：
          <input
            type="text"
            placeholder="username"
            value={username}
            name="username"//添加的,给事件源对象添加的名字
            onChange={this.Change.bind(this)}
          />
        </p>
        <p>
          password：
          <input
            type="password"
            placeholder="this is pasword"
            value={password}
            name="password"//添加的
            onChange={this.Change.bind(this)}
          />
        </p>
        <p>
          <button onClick={this.submitChange.bind(this)}>login</button>
        </p>

      </form>
    )
  }
}

添加一些功能:

class App extends React.Component {
  //受控组件: 使用1/2的控制表单输入行为取值的方式的组件
  //1.state是表单的唯一数据源
  state = {
    username: '',
    password: '',
    gender: 'male',
    isStudent: true,
    hobbies: [],
  }

  Change(e) {
    this.setState({
      [e.target.name]: e.target.value
    })
  }

  handleReset(e) {
    e.preventDefault();
    this.setState({
      username: '',
      password: '',
      gender: 'male',

    })
  }

  handleIsStudent(isStudent: Boolean) {
    this.setState(
      {
        isStudent
      }
    )
  }

  handleHobbiesChange(e) {
    if (e.target.checked) {
      this.setState({
        hobbies: [...this.state.hobbies, e.target.value]
      })
    } else {
      this.setState({
        hobbies: this.state.hobbies.filter(hobby => hobby !== e.target.value)
      })
    }
  }

  submitChange(e) {
    e.preventDefault();
    const {username, password, gender, isStudent, hobbies} = this.state;
    console.log(username, password, gender, isStudent, hobbies)
  }

  render() {
    const {username, password, gender, isStudent} = this.state;//解构
    return (
      <form>
        <p>
          username：
          <input
            type="text"
            placeholder="username"
            value={username}
            name="username"
            onChange={this.Change.bind(this)}
          />
        </p>
        <p>
          password：
          <input
            type="password"
            placeholder="this is pasword"
            value={password}
            name="password"
            onChange={this.Change.bind(this)}
          />
        </p>
        <p>
          <select
            value={gender}
            name="gender"
            onChange={this.Change.bind(this)}
          >
            <option value="male">男</option>
            <option value="female">女</option>
          </select>
        </p>
        <p>
          Are u a Student:
          Yes<input
          type="radio"
          name="isStudent"//上面下面的name是一样的，表明只能二选一
          checked={isStudent}
          onChange={this.handleIsStudent.bind(this, true)}
        />
          |
          No<input
          type="radio"
          name="isStudent"
          onChange={this.handleIsStudent.bind(this, false)}
        />
        </p>
        <p>
          piano: <input
          type="checkbox"
          name="hobbies"
          value="piano"
          onChange={this.handleHobbiesChange.bind(this)}
        /> |
          travel:<input
          type="checkbox"
          name="hobbies"
          value="travel"
          onChange={this.handleHobbiesChange.bind(this)}
        /> |
          running:<input
          type="checkbox"
          name="hobbies"
          value="running"
          onChange={this.handleHobbiesChange.bind(this)}
        /> |
          singing:<input
          type="checkbox"
          name="hobbies"
          value="singing"
          onChange={this.handleHobbiesChange.bind(this)}
        />
        </p>

        <p>
          <button onClick={this.submitChange.bind(this)}>login</button>
          <button onClick={this.handleReset.bind(this)}>reset</button>

        </p>


      </form>
    )
  }
}

优化后代码:

class App extends React.Component {
  //受控组件: 使用1/2的控制表单输入行为取值的方式的组件
  //1.state是表单的唯一数据源
  state = {
    username: '',
    password: '',
    gender: 'male',
    isStudent: true,
    hobbies: [],
    hobbiesData: [
      {
        name: 'piano',
        value: 'piano'
      }, {
        name: 'travel',
        value: 'travel'
      }, {
        name: 'running',
        value: 'running'
      }, {
        name: 'singing',
        value: 'singing'
      }
    ]
  }

  Change(e) {
    this.setState({
      [e.target.name]: e.target.value
    })
  }

  handleReset(e) {
    e.preventDefault();
    this.setState({
      username: '',
      password: '',
      gender: 'male',

    })
  }

  handleIsStudent(isStudent: Boolean) {
    this.setState(
      {
        isStudent
      }
    )
  }

  handleHobbiesChange(e) {
    if (e.target.checked) {
      this.setState({
        hobbies: [...this.state.hobbies, e.target.value]
      })
    } else {
      this.setState({
        //e.target.value为你取消的那个元素的value,将没有取消的元素全部过滤出来--->将选中的展示出来
        hobbies: this.state.hobbies.filter(hobby => hobby !== e.target.value)
      }, () => {
        console.log(e.target.value + "。。。this is a test: e.target.value")
      })
    }
  }

  submitChange(e) {
    e.preventDefault();
    const {username, password, gender, isStudent, hobbies} = this.state;
    console.log(username, password, gender, isStudent, hobbies)
  }

  render() {
    const {username, password, gender, isStudent, hobbiesData} = this.state;//解构
    return (
      <form>
        <p>
          username：
          <input
            type="text"
            placeholder="username"
            value={username}
            name="username"
            onChange={this.Change.bind(this)}
          />
        </p>
        <p>
          password：
          <input
            type="password"
            placeholder="this is pasword"
            value={password}
            name="password"
            onChange={this.Change.bind(this)}
          />
        </p>
        <p>
          <select
            value={gender}
            name="gender"
            onChange={this.Change.bind(this)}
          >
            <option value="male">男</option>
            <option value="female">女</option>
          </select>
        </p>
        <p>
          Are u a Student:
          Yes<input
          type="radio"
          name="isStudent"//上面下面的name是一样的，表明只能二选一
          checked={isStudent}
          onChange={this.handleIsStudent.bind(this, true)}
        />
          |
          No<input
          type="radio"
          name="isStudent"
          onChange={this.handleIsStudent.bind(this, false)}
        />
        </p>
        {
          hobbiesData.map(item => {
            return (
              <span>
                                {item.name}:  
                                <input
                                  type="checkbox"
                                  name="hobbies"
                                  value={item.value}
                                  onChange={this.handleHobbiesChange.bind(this)}
                                /> |  
                            </span>
            )
          })
        }
        <p>
          <button onClick={this.submitChange.bind(this)}>login</button>
          <button onClick={this.handleReset.bind(this)}>reset</button>

        </p>


      </form>
    )
  }
}


ReactDOM.render(
  <App/>,
  document.body
)