React-表单处理

Posted 2021-08-28 CaoPengCheng&

React-表单处理

【1】受控组件(常用)

html中的表单元素是课输入的，也就是有自己的课变状态
而，react中可变状态通常保存在state中，并且只能通过setState()方法修改

React将state与表单元素值value绑定在一起，由state来控制表单元素的值

(1)在state中添加一个状态，作为表单元素的value值（控制表单元素值的来源）
	state = {txt:''}
	<input type="text" value={this.state.txt}/>
(2)给表单元素绑定change事件，将表单元素的值设置为state的值（控制表单元素值的变化）

state = {txt:''}
<input type="text" value={this.state.txt}
	onChange={e => this.setState({txt:e.target.value})}
/>

【2】常用表单处理

import React from 'react';

class Form extends React.Component{
   state = {
       txt:'',
       content:'',
       city:'gz',
       isChecked:false
   }
   /*处理文本框*/
   handleChange = e => {
       this.setState({
           txt:e.target.value
       })
   }
   /*处理富文本*/
   handleContent = e => {
       this.setState({
           content:e.target.value
       })
   }
   /*处理下拉框*/
   handleCity = e =>{
       this.setState({
           city:e.target.value
       })
   }
   /*处理复选框*/
   hangleChecked = e =>{
       this.setState({
           isChecked:e.target.checked
       })
   }
   render(){
       return(
           <div>
               {/*文本框*/}
               <input type="text" value={this.state.txt} onChange={this.handleChange} />
              <br/>
               {/*富文本框*/}
               <textarea value={this.state.content} onChange={this.handleContent}>123</textarea>
               <br/>
               {/*下拉框*/}
               <select value={this.state.city} onChange={this.handleCity}>
                   <option value="sh">上海</option>
                   <option value="bj">北京</option>
                   <option value="gz">广州</option>
               </select>
               <br/>
               {/*复选框*/}
               <input type="checkbox" checked={this.state.isChecked } onChange={this.hangleChecked}/>
               <br/>
           </div>
       )
   }
}

export default Form

【3】多表单元素优化

使用一个事件处理程序同时处理多个表单元素
（1）给表单元素添加name属性，名称与state相同
（2）根据表单元素类型获取对应值
（3）在change事件处理程序中通过[name]来修改对应的state

import React from 'react';

class Form extends React.Component{
   state = {
       txt:'',
       content:'',
       city:'gz',
       isChecked:false
   }
   /*统一处理*/
   handleForm = e => {
       //获取当前DOM对象
       const target=e.target
       //根据类型获取值
       const value = target.type === 'checkbox'
           ?target.checked
           :target.value
       //获取name
       const name=target.name
       this.setState({
           [name]:value
       })
   }
   render(){
       return(
           <div>
               {/*文本框*/}
               <input type="text" name="txt" value={this.state.txt} onChange={this.handleForm} />
              <br/>
               {/*富文本框*/}
               <textarea value={this.state.content} name="content" onChange={this.handleForm}>123</textarea>
               <br/>
               {/*下拉框*/}
               <select value={this.state.city} name="city" onChange={this.handleForm}>
                   <option value="sh">上海</option>
                   <option value="bj">北京</option>
                   <option value="gz">广州</option>
               </select>
               <br/>
               {/*复选框*/}
               <input type="checkbox" name="isChecked" checked={this.state.isChecked } onChange={this.handleForm}/>
               <br/>
           </div>
       )
   }
}

export default Form

【4】非受控组件

借助于ref，使用原生DOM方式来获取表单元素值
ref的作用：获取DOM或组件

步骤：
（1）调用React.createRef()方法来创建一个ref对象

constructor(){
	super()
	this.txtRef = React.createRef()
}

（2）将创建好的ref对象添加到文本框中
	<input type="text" ref={this.txtRef} />
（3）通过ref对象获取到文本框的值
	Console.log(this.txtRef.current.value)

import React from 'react';

class Ref extends React.Component{
   constructor(){
       super()
       this.txtRef = React.createRef()
   }
   getTxt = ()=>{
       console.log('文本框值为：',this.txtRef.current.value )
   }
   render(){
       return(
           <div>
               <input type="text" ref={this.txtRef} />
               <button onClick={this.getTxt}>获取文本框的值</button>
           </div>
       )
   }
}

export default Ref