react 收集表单数据的两种方式

最新推荐文章于 2025-06-10 11:54:05 发布

胡椒粉0121

最新推荐文章于 2025-06-10 11:54:05 发布

阅读量1.4k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端MVVM框架—React

本文链接：https://blog.youkuaiyun.com/huangjianfeng21/article/details/94182055

前端MVVM框架—React 专栏收录该内容

23 篇文章

订阅专栏

使用ref属性获取表单的数据

非受控组件：需要时才手动读取表单输入框中的数据

需求: 自定义包含表单的组件

输入用户名密码后, 点击登陆提示输入信息
不提交表单

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>09_form</title>
</head>
<body>
<div id="example"></div>

<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">
  class LoginFrom extends React.Component {
    constructor (props) {
      super(props)
      this.handleSubmit = this.handleSubmit.bind(this)
    }
    render () {
      return (
        <form action="/test" onSubmit={this.handleSubmit}>
          用户名：<input type="text" ref={input => this.userName = input}/>
          密码：<input type="password" ref={input => this.userPass = input}/>
          <input type="submit" value="登陆"/>
        </form>
      )
    }
    handleSubmit (event) {
      const userName = this.userName.value
      const userPass = this.userPass.value
      alert(userName)
      alert(userPass)
      event.preventDefault() //阻止的默认行为（表单是的默认行为提交）
    }
  }


  ReactDOM.render(<LoginFrom/>, document.getElementById('example'))
</script>
</body>
</html>

使用onChange事件

受控组件：表单项输入数据能自动收集成状态,

react的onChange事件跟原生的不一样，原生js的onChange是离开焦点之后才会触发，但是react中是输入一个字符触发一下

需求: 自定义包含表单的组件

输入用户名密码后, 点击登陆提示输入信息
不提交表单

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>09_form</title>
</head>
<body>
<div id="example"></div>

<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">
  class LoginFrom extends React.Component {
    constructor (props) {
      super(props)
      // 初始化状态
      this.state = {
        pwd: ''
      }
      this.handleSubmit = this.handleSubmit.bind(this)
      this.handleChange = this.handleChange.bind(this)
    }
    render () {
      return (
        <form action="/test" onSubmit={this.handleSubmit}>
          用户名：<input type="text" ref={input => this.userName = input}/>
          密码：<input type="password" value={this.state.pwd} onChange={this.handleChange}/>
          <input type="submit" value="登陆"/>
        </form>
      )
    }
    handleChange (event) {
      // 1.读取输入的值
      const pwd = event.target.value

      // 2.更新state下面对应的属性的状态
      this.setState({pwd})
    }
    handleSubmit (event) {
      const userName = this.userName.value
      const {pwd} = this.state
      alert(`用户名为${userName},密码为${pwd}`)

      event.preventDefault() //阻止的默认行为（表单是的默认行为提交）
    }
  }


  ReactDOM.render(<LoginFrom/>, document.getElementById('example'))
</script>
</body>
</html>