受控组件

受react控制的表单元素
将表单元素的value属性与state进行绑定
绑定change事件修改state的值

  1. class Abc extends React.Component{
  2. state={
  3.     txt:''
  4. }
  5. handleChange = e =>{
  6.     this.setState({txt:e.target.value})
  7. }
  9.     render(){
  10.       return (<input value={this.state.txt} onChange={this.handleChange}/>)
  11.   }  
  12. }

多表单优化

一个组件中存在多个表单时,每个表单写一个对应的处理程序就会变得很麻烦
以下代码是对多表单情况进行的优化

1:为每个表单都添加一个name属性,名称与state中绑定的内容相同
2:根据name获取不同的值

  1. class Abc extends React.Component{
  2. state={
  3.     txt:''
  4. }
  5. handleChange = e =>{
  6.   // 获取当绑定的元素
  7.   const target = e.target
  8.   // 判断表单绑定的是否为checkbox 是复选或单选 否 其他标签  获取值
  9.   const value = target.type==='checkbox'?target.checked:target.value
  10.   // 获取name值 
  11.   const name = target.name
  12.   // 通过ES6的动态方法修改表单对应的值
  13.     this.setState({[name]:value})
  14. }
  16.     render(){
  17.       return (<input name='txt' value={this.state.txt} onChange={this.handleChange}/>)
  18.   }  
  19. }

非受控组件

非受控组件即不受到react控制的组件
使用ref获取内容

  1. class Abc extends React.Component{
  2. constructor(){
  3.     super()
  4.   // 创建一个ref对象
  5.   // this.txtRef值ref对象名字可以任意
  6.   this.txtRef = React.createRef()
  7. }
  9. // 点击事件
  10. handleClick=()=>{
  11.   // 表单输入的内容
  12.     console.log(this.txtRef.current.value)
  13. }
  15.     render(){
  16.       return (
  17.       // 绑定ref
  18.       <input ref={this.txtRef} />
  19.       // 点击事件获取输入的内容
  20.         <button onClick={this.handleClick}>获取表单内容</button>
  21.     )
  22.   }  
  23. }