React简单表单最佳实践

最新推荐文章于 2025-03-30 09:40:19 发布

Einstellung

最新推荐文章于 2025-03-30 09:40:19 发布

阅读量461

点赞数

分类专栏：前端文章标签： react

本文链接：https://blog.youkuaiyun.com/Einstellung/article/details/116239159

版权

本文探讨了React中创建和管理简单表单的最佳实践。通过示例，展示了如何设置表单默认值，以及如何处理多状态和不同点击事件，以提高代码复用性和维护性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

从一个简单表单谈起

假设我们要做一个表单，比如是这样，要怎么做？
在这里插入图片描述
你可能会这样写：firstName对应一个键盘记录，lastName对应一个键盘记录：

import React from 'react'

class Uncontrolled extends React.Component {
   

  constructor(props) {
   
    super(props)

    this.state = {
   
      firstName: '',
      lastName: '',
    }

    this.handleChangeFirstName = this.handleChangeFirstName.bind(this)
    this.handleChangeLastName = this.handleChangeLastName.bind(this)
    this.handleSubmit = this.handleSubmit.bind(this)
  }

  handleChangeFirstName({
    target }) {
   
    this.setState({
   
      firstName: target.value,
    })
  }

  handleChangeLastName({
    target }) {
   
    this.setState({
   
      lastName: target.value,
    })
  }

  handleSubmit(e) {
   
    e.preventDefault()

    console.log(`${
     this.state.firstName} ${
     this.state.