React（七）表单元素的绑定

输入框

如果我们要将输入框的数据进行双向绑定，可以先定义一个state绑定给输入框，然后通过change事件来改变数据，这样操作之后，input元素也变成了一个受控组件

class App extends Component {
  constructor() {
    super()
    this.state = {
      user: {
        username: "",
        password: "",
      },
    }
  }
  inputChangeHandler(e) {
    console.log(e.target.name)
    this.setState({
      user: {
        ...this.state.user,
        [e.target.name]: e.target.value,// 这种写法，当state的key与input的name一致时有效
      },
    })
  }
  render() {
    return (
      <div>
        <input
          type="text"
          name="username"
          onChange={(e) => this.inputChangeHandler(e)}
          value={this.state.user.username}
        />
        <input
          type="password"
          name="password"
          onChange={(e) => this.inputChangeHandler(e)}
          value={this.state.user.password}
        />
      </div>
    )
  }
}

checkbox

checkbox是当input元素的type为checkbox时呈现出来的元素如下

<label htmlFor="agree">
    同意
   <input
     id="agree"
     type="checkbox"
   />
</label>

它的选中是通过属性checked来进行控制的，所以要让他变成一个受控组件，需要让checked与state进行绑定

class App extends Component {
  constructor() {
    super()
    this.state = {
      isChecked: true,
    }
  }
  render() {
    return (
      <div>
        <label htmlFor="agree">
          同意
          <input
            id="agree"
            type="checkbox"
            checked={this.state.isChecked}
          />
        </label>
      </div>
    )
  }
}

现在就成功的绑定上了isChecked，但是现在点击，并没有效果，因为点击时没有更改state，所以现在还需要一个事件处理，虽然checkbox是一个input但是通过value是获取不到是否选中的需要通过checked来获取，完整如下

class App extends Component {
  constructor() {
    super()
    this.state = {
      isChecked: true,
    }
  }
  checkedChangeHandler(e) {
    this.setState({
      isChecked: e.target.checked,
    })
  }
  render() {
    return (
      <div>
        <label htmlFor="agree">
          同意
          <input
            id="agree"
            type="checkbox"
            onChange={(e) => this.checkedChangeHandler(e)}
            checked={this.state.isChecked}
          />
        </label>
      </div>
    )
  }
}

checkbox组

上面进行了单个checkbox绑定，如果需要多选checkbox呢？可以采用以下方式

class App extends Component {
  constructor() {
    super()
    this.state = {
      hobbies: [
        { value: "basketball", text: "篮球", isChecked: false },
        { value: "run", text: "跑步", isChecked: false },
        { value: "fly", text: "飞", isChecked: false },
      ],
    }
  }
  render() {
    return (
      <div>
        {this.state.hobbies.map((item, index) => {
          return (
            <label htmlFor={item.value} key={item.value}>
              {item.text}
              <input
                type="checkbox"
                checked={item.isChecked}
              />
            </label>
          )
        })}
      </div>
    )
  }
}

这里如果要切换状态，我们可以通过修改state对应组的isChecked来改变，完整如下

class App extends Component {
  constructor() {
    super()
    this.state = {
      hobbies: [
        { value: "basketball", text: "篮球", isChecked: false },
        { value: "run", text: "跑步", isChecked: false },
        { value: "fly", text: "飞", isChecked: false },
      ],
    }
  }
  checkedChangeHandler(e, index) {
    const hobbies = [...this.state.hobbies] // 重新创建hobby
    hobbies[index].isChecked = e.target.checked // 根据index找到对应的checked并进行改变
    this.setState({
      hobbies,
    })
  }
  render() {
    return (
      <div>
        {this.state.hobbies.map((item, index) => {
          return (
            <label htmlFor={item.value} key={item.value}>
              {item.text}
              <input
                type="checkbox"
                onChange={(e) => this.checkedChangeHandler(e, index)}
                checked={item.isChecked}
              />
            </label>
          )
        })}
      </div>
    )
  }
}

select单多选

select单选的绑定和input相似，首先select绑定上一个值，然后change函数改变state对应的value就行

this.state = {
  hobby: "run",
  hobbies: [],
}
selectHandler(e) {
  this.setState({
    hobby: e.target.value,
  })
}
<select
  value={this.state.hobby}
  onChange={(e) => this.selectHandler(e)}
>
  <option value="run">跑步</option>
  <option value="fly">飞</option>
  <option value="basketball">篮球</option>
</select>

多选，也就是给select设置multiple属性，首先select绑定的需要是一个数组，其次改变state的时候，需要获取到所有选中的option的value

this.state = {
  hobby: "run",
  hobbies: [],
}
selectMoreHandler(e) {
  // 先将获取到的类数组转化为数组，然后map出value
  const hobbies = Array.from(e.target.selectedOptions).map((item) => {
    return item.value
  })
  this.setState({
    hobbies: hobbies,
  })
}
<select
  value={this.state.hobbies}
  onChange={(e) => this.selectMoreHandler(e)}
  multiple
>
  <option value="run">跑步</option>
  <option value="fly">飞</option>
  <option value="basketball">篮球</option>
</select>

完整如下

class App extends Component {
  constructor() {
    super()
    this.state = {
      hobby: "run",
      hobbies: [],
    }
  }
  // 单选处理
  selectHandler(e) {
    this.setState({
      hobby: e.target.value,
    })
  }
  // 多选处理
  selectMoreHandler(e) {
    const hobbies = Array.from(e.target.selectedOptions).map((item) => {
      return item.value
    })

    this.setState({
      hobbies: hobbies,
    })
  }
  render() {
    return (
      <div>
        {/* select单选 */}
        <select
          value={this.state.hobby}
          onChange={(e) => this.selectHandler(e)}
        >
          <option value="run">跑步</option>
          <option value="fly">飞</option>
          <option value="basketball">篮球</option>
        </select>
        {/* select多选 */}
        <select
          value={this.state.hobbies}
          onChange={(e) => this.selectMoreHandler(e)}
          multiple
        >
          <option value="run">跑步</option>
          <option value="fly">飞</option>
          <option value="basketball">篮球</option>
        </select>
      </div>
    )
  }
}