React表单与事件

1、React表单组件

在HTML中，表单元素与其他元素最大的不同是它自带值或数据，而且在我们的应用中，只要是有表单出现的地方，就会有用户输入，就会有表单事件触发，就会涉及的数据处理。

在我们用React开发应用时，为了更好地管理应用中的数据，响应用户的输入，编写组件的时候呢，我们就会运用到受控组件与非受控组件这两个概念。

React推荐我们在绝大多数情况下都使用受控组件。这样可以保证表单的数据在组件的state管理之下，而不是各自独立保有各自的数据。

（1）受控组件与非受控组件

大致可分为两类：

• 受控组件：(进行双向数据绑定的控件)一般涉及到表单元素时我们才会使用这种分类方法。受控组件的值由props或state传入，用户在元素上交互或输入内容会引起应用state的改变。在state改变之后重新渲染组件，我们才能在页面中看到元素中值的变化，假如组件没有绑定事件处理函数改变state，用户的输入是不会起到任何效果的，这也就是“受控”的含义所在。
• 非受控组件：(没有进行双向数据绑定的控件)类似于传统的DOM表单控件，用户输入不会直接引起应用state的变化，我们也不会直接为非受控组件传入值。想要获取非受控组件，我们需要使用一个特殊的ref属性，同样也可以使用defaultValue属性来为其指定一次性的默认值。
• 2、React事件

     事件写法：

    constructor(arg){

        super(arg)

//第一种

        this.fn=()=>{

            console.log(11111)

        }

//第二种

        this.fn2=function(){

            console.log(22222)

        }

        this.state={

            arr:[{id:1,name:"one"},{id:2,name:"two"}]

        }

    }

    //第三种

    fn3=function(){

        console.log(33333)

    }

//第四种

    fn4=()=>{

        console.log(44444)

    }

//第五种

    fn5(){

        console.log(55555)

    }

无论那种方式，使用都是用this.函数名

（1）事件类型

使用React元素处理事件与处理DOM元素上的事件非常相似。不过有一些语法上的差异：

• React事件使用小驼峰命名法，而不是全部小写命名。
• React事件使用JSX传递一个函数作为事件处理程序，而不是一个字符串。

示例：

• 鼠标事件：onClick onDoubleClick onMouseDown
• 触摸事件：onTouchStart onTouchMove onTouchEnd
• 键盘事件：onKeyDown
• 剪切事件：onCopy onCut onPaste
• 表单事件：onChange onInput onSubmit
• 焦点事件：onFocus
• UI事件：onScroll
• 滚动事件：onWheel

 

input框的Vlaue值获取：

export default class Init extends Component {

    constructor(arg){

        super(arg)

        this.state={

            value5:"1999-11-13"

        }

        this.change1=(arg)=>{

            this.state.value=arg.target.value

            this.setState(this.state)

           

        }

        this.look1=()=>{

            this.setState(this.state,()=>{

                console.log(this.state.value)

            })

        }

        this.change2=(arg)=>{

            this.state.value2=arg.target.value

            this.setState(this.state)

           

        }

        this.look2=()=>{

            this.setState(this.state,()=>{

                console.log(this.state.value2)

            })

        }

        this.change3=(arg)=>{

            this.state.value3=arg.target.value

            this.setState(this.state)

           

        }

        this.look3=()=>{

            this.setState(this.state,()=>{

                console.log(this.state.value4)

            })

        }

        this.change4=(arg)=>{

            this.state.value4=arg.target.value

            this.setState(this.state,()=>{

                console.log(this.state.value4)

            })

           

        }

        this.change5=(arg)=>{

            console.log(arg)

            this.state.value4=arg.target.value

            this.setState(this.state)

           

        }

        this.look5=()=>{

            this.setState(this.state,()=>{

                console.log(this.state.value4)

            })

        }

        this.change6=(arg)=>{

            this.state.value5=arg.target.value

            this.setState(this.state,()=>{

                console.log(this.state.value5)

            })

           

        }

        this.change7=(arg)=>{

            this.state.value6=arg.target.value

            this.setState(this.state,()=>{

                console.log(this.state.value6)

            })

           

        }

    }

  render() {

    return (

      <div>

        <p>text</p>

        <input type="text"  value={this.state.value}  onChange={this.change1}/>

        <button onClick={this.look1}>获取值</button>

        <hr />

        <p>password</p>

        <input type="password"  value={this.state.value2}  onChange={this.change2}/>

        <button onClick={this.look2}>获取值</button>

        <hr />

        <p>radio</p>

        <input type="radio" name='one' value="跳舞" onChange={this.change4}/>跳舞

        <input type="radio" name='one' value="旅游"  onChange={this.change4}/>旅游

        <input type="radio" name='one' value="游泳"  onChange={this.change4}/>游泳

        <input type="radio"  name='one'value="唱歌"  onChange={this.change4}/>唱歌

        <hr />

        <p>checkboxs</p>

        <input type="checkbox" name='one1' value="跳舞" checked onChange={this.change5}/>跳舞

        <input type="checkbox" name='one1' value="旅游"  onChange={this.change5}/>旅游

        <input type="checkbox" name='one1' value="游泳"  onChange={this.change5}/>游泳

        <input type="checkbox" name='one1'value="唱歌"  onChange={this.change5}/>唱歌

        <button onClick={this.look4}>获取值</button>

        <hr />

        <p>date</p>

        <input type="date" value={this.state.value5}  onChange={this.change6}/>

        <hr />

        <p>file</p>

        <input type="file" value={this.state.value6}  onChange={this.change7}/>

        <hr />

      </div>

    )

  }

 

（2）事件对象

• React对原生的事件系统也进行了封装，在React中的事件对象实际上是一个跨浏览器的虚拟事件对象 ，它拥有和原生事件对象相同的属性和方法。
• 在react 中使用“return false” 无法阻止默认事件，只能通过事件对象调用“event.preventDefault() ”进行阻止

（3）事件绑定

事件处理函数内部使用this 关键词时其指向需要注意：

 

  fn3=function(){

        console.log(this)//undefined

    }

    fn5(){

        console.log(this)//undefined

    }

 this.fn2=function(){

            console.log(this)//undefined

        }

 

解决方法：

1.constructor 内部对事件处理函数bind 绑定this(官方推荐)

       this.fn2=function(){

            console.log(this,22222)

        }.bind(this)

 

2.每次事件绑定都对事件处理函数做bind 绑定

        <button onClick={this.fn3.bind(this)}>fn3</button>

 

  3. 定义事件处理函数时使用箭头函数

    fn4=()=>{

        console.log(this,44444)

    }

 

        this.fn=()=>{

            console.log(this,11111)

        }

 

 

当事件处理函数需要传参时：

传值：

        <button onClick={this.fn3.bind(this,123)}>fn3</button>

 

取值：

 fn3=function(arg){

        console.log(arg)

    }