React中Form表单事件（input CheckBox radio 取值操作）_react checkbox defaultchecked 编辑取值

1、常见的表单包括输入框，单选框，复选框，下拉框和多文本框，本次主要总结它们在react中如何取值。
2、输入框
在之前有说过输入框，可以先给input框的value绑定一个值，然后通过input框的改变事件来获取用户输入的值，并将这个值赋值给value绑定的值，就可以实现数据的双向绑定了。
3、单选框
单选框，首先需要控制的单选框的是否选中，这里可以通过控制checked属性的值来控制当前单选框是否选中，改变checked的值就可以改变选中状态。其次，单选框也有onChange事件，可以通过onChange事件获取value的值。所以可以通过value值间接控制是否选中，但是onChange只能获取value值，不能改变，需要在中间添加一个过渡的变量。
4、select下拉框
关于select，需要注意的有三点，首先是循环渲染option；其次是在之前的select中，value都是写在option上的，但是在在react中，对select进行了简单的封装，需要将value放在select中；最后就是通过select的onChange事件获取当前的选择情况。
5、下面直接贴出完整代码
state：

import React, { Component } from "react";
class ReactForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      msg: "react表单",
      name: "",
      sex: "1",
      city: "",
      citys: ["北京", "上海", "深圳"],
      hobby: [
        {
          title: "睡觉",
          checked: true
        },
        {
          title: "吃饭",
          checked: false
        },
        {
          title: "敲代码",
          checked: true
        }
      ],
      info: ""
    };

    this.handleInfo = this.handleInfo.bind(this);
  }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

methods

  handelSubmit = (e) => {
    //阻止submit的提交事件
    e.preventDefault();

    console.log(
      this.state.name,
      this.state.sex,
      this.state.city,
      this.state.hobby,
      this.state.info
    );
  };
  handelName = e => {
    this.setState({
      name: e.target.value
    });
  };

  handelSex = e => {
    this.setState({
      sex: e.target.value
    });
  };

  handelCity = e => {
    this.setState({
      city: e.target.value
    });
  };
  handelHobby = key => {
    var hobby = this.state.hobby;

    hobby[key].checked = !hobby[key].checked;

    this.setState({
      hobby: hobby
    });
  };

  handleInfo(e) {
    this.setState({
      info: e.target.value
    });
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

JSX

  render() {
    return (
      <div>
        <h2>{this.state.msg}</h2>

        <form onSubmit={this.handelSubmit}>
          用户名:{" "}
          <input
            type="text"
            value={this.state.name}
            onChange={this.handelName}
          />{" "}
          <br />
          <br />
          性别:{" "}
          <input
            type="radio"
            value="1"
            checked={this.state.sex == 1}
            onChange={this.handelSex}
          />
          男
          <input
            type="radio"
            value="2"
            checked={this.state.sex == 2}
            onChange={this.handelSex}
          />
          女 <br />
          <br />
          居住城市:
          <select value={this.state.city} onChange={this.handelCity}>
            {this.state.citys.map(function(value, key) {
              return <option key={key}>{value}</option>;
            })}
          </select>
          <br />
          <br />
          爱好:
          {// 注意this指向
          this.state.hobby.map((value, key) => {
            return (
              <span key={key}>
                <input
                  type="checkbox"
                  checked={value.checked}
                  onChange={this.handelHobby.bind(this, key)}
                />{" "}
                {value.title}
              </span>
            );
          })}
          <br />
          <br />
          备注：
          <textarea vlaue={this.state.info} onChange={this.handleInfo} />
          <input type="submit" defaultValue="提交" />
          <br />
          <br /> <br />
          <br />
        </form>
      </div>
    );
  }
}

export default ReactForm;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69