受控和非受控表单|不受控制的东西，你非要往家领？

本文转载自微信公众号「勾勾的前端世界」，作者西岭。转载本文请联系勾勾的前端世界公众号。

创新互联专注于企业全网整合营销推广、网站重做改版、容县网站定制设计、自适应品牌网站建设、H5页面制作、购物商城网站建设、集团公司官网建设、成都外贸网站建设公司、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为容县等各大城市提供网站开发制作服务。

常用的受控表单示例

受控的下拉列表

  
 
 
   
  
  import React, { Component } from 'react'    
  
      
  
  export class Tables extends Component {    
  
      
  
    state = {    
  
      subject: "HTML"    
  
    }    
  
      
  
    render() {    
  
      return (    
  
            
  
          {this.state.subject}
    
  
             
  
  
          onChange={    
  
              (ev) => this.setState(    
  
                { subject: ev.target.value }    
  
              )    
  
            }>    
  
            JS    
  
            HTML    
  
            CSS

)

}

export default Tables

受控单选框

  
 
 
   
  
  import React, { Component } from 'react'    
  
      
  
  export class Tables extends Component {    
  
      
  
    state = {    
  
      sex: "男"    
  
    }    
  
      
  
    render() {    
  
      return (    
  
            
  
          {this.state.sex}
    
  
             
  
  
          onChange={    
  
              (ev) => this.setState({ sex: ev.target.value })    
  
            } /> 男    
  
             
  
  
          onChange={    
  
              (ev) => this.setState({ sex: ev.target.value })    
  
            } /> 女    
  
             
  
  
          onChange={    
  
              (ev) => this.setState({ sex: ev.target.value })    
  
            } /> 妖

import React, { Component } from 'react'
export class Tables extends Component {
// 模拟数据源
Datas = [
{id:1,title:'HTML',isChecked:false},
{id:2,title:'JS',isChecked:true},
{id:3,title:'CSS',isChecked:false},
]
checks = (index,ev)=>{
// console.log(ev.target.checked)
// console.log(index)
this.Datas[index].isChecked = ev.target.checked
}
render() {
return (
复选框
{
this.Datas.map((data,index)=>{
return (
{/* 使用 onChange 事件绑定，传递下标及事件对象，在处理函数中进行状态修改 */}
{this.checks(index,ev)}} /> {data.title}
)
})
}
console.log(this.Datas)} >展示多选框内容数据

import React, { Component } from 'react'
export class Tables extends Component {
gets = ()=>{
console.log(this.refs.users.value)
}
render() {
return (
this.gets()}>获取
)
}
}
export default Tables

import React, { Component } from 'react'
export class Tables extends Component {
constructor (){
super()
this.myref = React.createRef()
}
gets = ()=>{
console.log(this.myref.current.value)
}
render() {
return (
this.gets()}>获取
)
}
}
export default Tables

受控和非受控表单|不受控制的东西，你非要往家领？

常用的受控表单示例

复选框

非受控表单

总结