10-组件化高级-非受控组件使用过程

37 阅读1分钟

用的不多,一般用受控组件

image.png

  • 实在要用受控组件,通过ref绑定元素,通过current.value获取元素内容
  • 默认值获取,参考上图最后一行defalutValue defaultChecked
<input type="text" defaultValue={intro} ref={this.introRef} />
import React, { PureComponent, createRef } from 'react'

constructor() {
    super()
    this.introRef = createRef()
}
handleSubmit (e) {
    // 原始type=submit类型的提交,会导致提交后页面刷新
    // 现在使用点击事件,获取到表单元素数据,进行操作数据,再通过ajax发送网络请求

    // 1、阻止默认行为
    e.preventDefault()
    console.log(this.introRef.current.value)
  }