之前的文章我们介绍了 React 表单事件 键盘事件 事件对象以及 React 中 的 ref 获取 dom 节点 , 双向数据绑定. 接下来我们将介绍 React 表单详解 约束性和非约束性组件 input text checkbox radio select textarea 以及获取表单的内容.
- import React, {Component} from 'react';
- class Home extends Component {
- constructor(props) {
- super(props);
- this.state = {
- name: "",
- sex: "1",
- city: "",
- cities: ["北京", "上海", "南京"],
- hobbies: [{
- title: "抽烟", checked: true
- }, {
- title: "喝酒", checked: false
- }, {
- title: "烫头", checked: false
- }],
- info: "",
- }
- }
- // 获取所有数据
- getAllData = (event) => {
- event.preventDefault();
- console.log(this.state)
- }
- // 名字
- changeName = (event) => {
- this.setState({
- name: event.target.value
- })
- }
- // 性别
- changeSex = (event) => {
- this.setState({
- sex: event.target.value
- })
- }
- // 地址
- changeCity = (event) => {
- this.setState({
- city: event.target.value
- })
- }
- // 爱好
- changeHobbies = (key) => {
- let hobbies = this.state.hobbies;
- hobbies[key].checked = !hobbies[key].checked;
- this.setState({
- hobbies: hobbies
- })
- }
- // 简介
- changeInfo = (event) => {
- this.setState({
- info: event.target.value
- })
- }
- render() {
- return (
- <div>
- <p>Hello {this.state.name}</p>
- <form action="" onSubmit={this.getAllData}>
用户名:
- <input value={this.state.name} onChange={this.changeName} type="text"/>
- <br/><br/>
性别:
男 < input value="1" checked={this.state.sex === "1"} onChange={this.changeSex} type="radio"/>
女 < input value="2" checked={this.state.sex === "2"} onChange={this.changeSex} type="radio"/>
- <br/>
- <br/>
地址:
- <select value={this.state.city} onChange={this.changeCity}>
- {this.state.cities.map((val, key) => {
- return <option key={key}>{val}</option>
- })}
- </select>
- <br/><br/>
爱好:
- {this.state.hobbies.map((val, key) => {
- return (
- <span key={key}>
- {val.title}
- <input checked={val.checked} onChange={this.changeHobbies.bind(this, key)} type="checkbox"/>
- </span>
- )
- })}
- <br/><br/>
简介:
- <textarea value={this.info} onChange={this.changeInfo}></textarea>
- <br/><br/>
- <input value="提交" type="submit"/>
- </form>
- </div>
- );
- }
- }
- export default Home;
之前我们已经介绍过了表单在 React 的一些基本信息, 上面的代码比较详细的介绍了一下不同表单获取信息的方式.
下面是不同表单的不同处理方式:
1,text:
用 value 绑定 this.state 中的数据, 然后通过 onChange 事件获取 changeName 方法, 在 event 事件中获取 input 的值并赋值给 this.state
2,radio:
性别只能选择一个, 所以 this.state.sex 默认值为 1 , 表示男, value 值分别绑定为 1 和 2, 通过 checked 属性来判断哪个被选中, 通过 onChange 事件将默认的 value 值赋值给 this.state.sex,checked 属性就能来判断被选中的值了.
3,select:
select 跟正常的 html 有所不同, 它的 value 值绑定在 select 上, 然后通过 onChange 事件获取选中的值, 并将该值赋值给另一个变量来存储所选的值.
4,checkbox:
checkbox 为一个数组, 可以选择多个值, 在 this.state 的每个值中再添加一个属性 checked, 选中为 true, 没选中为 false, 当点击某一个时, 将所选中的值通过 onChange 事件传给 changeHobbies, 然后通过该值找到 this.state 列表中的位置, 将 checked 属性值去反即可来控制选中和取消选中.
5,textarea:
textarea 和 text 的获取值方法是一样的, 通过 value 绑定 this.state 中的值, 通过 onChange 事件来获取 textarea 框内的值并赋给 this.state.
这样就实现了 form 表单中的值的双向数据绑定, 可以通过在 form 上添加 onSubmit 事件, 取消默认触发事件来获取 form 表单内的值.
最后运行结果为:
来源: https://www.cnblogs.com/weijiutao/p/10649075.html