使用 react.js 提交大表单

Question

在形式方面与 react.js 一起工作很痛苦。我来自 angular，因为 2 种绑定方式很棒，所以集成起来很快。但是当我做出反应时，我承认我迷路了。

说这是一个用户配置文件，我从 API

获得了这些数据

var profile = {
    name:"Gaila",
    age:22,
    skills: [{id:1,name:"react"},{id:1,name:"angular"}],
    club: [{id:1,name:"dancing"},{id:1,name:"hiking"}],
    description: "some long string"
};

在 UI 上我有 text input、textarea、checkbox 和 select。

当用户点击保存时我该如何处理？我是否必须将每个输入元素与 onChange 绑定？像 handleNameChange、handleAgeChange、handleSkillsChange..天哪，这太荒谬了。

所以 ref 进入我的脑海，简单，只需执行 ref="name" 我可以在 ReactDOM.findDOMNode(this.refs.name).value 之前得到它，但是等等，它在 <select> 上不起作用，这很糟糕有时我使用 ref，有时我使用 handle 函数。

伙计们，我说真的，真的需要帮助！

Answer 1

如果您只需要提取表单值，您可以使用 form-serialize - 它可以通过 npm 作为一个包使用。

在您的组件中，向您的表单添加一个提交事件：

<form onSubmit={this.handleSubmit}>

您的处理程序像这样提取表单：

handleSubmit = (event) => {
  event.preventDefault()
  const values = serializeForm(event.target, { hash: true })
  console.log(values)
}

Answer 2

这是一个重用事件处理程序并从事件中提取差异的示例。在 codepen.

查看实际效果

const FormFunc = () => {

  const changeHandler = (e) => {
    console.log(`e.target.name, name: `, e.target.name, e.target.value)
  }
  return (
    <form>
      <input onChange={changeHandler} type='text' name='firstName' />
      <input onChange={changeHandler} type='text' name='surname' />
      <input onChange={changeHandler} type='phone' name='phone' />
      <input onChange={changeHandler} type='email' name='email' />
    </form>
  )
}

使用 react.js 提交大表单

Submitting big forms with react.js

javascript

forms

form-submit

reactjs