Question

在形式方面，使用react.js会很痛苦。我来自棱角分明，因为有两种方法可以很好地结合东西，它可以很快地整合东西。但是当我反应时，我承认我迷失了。

说它是用户个人资料，我从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"
};

用户界面上的

我有text input，textarea，checkbox和select。

用户点击保存后如何处理？我是否必须使用onChange绑定每个输入元素？比如handleNameChange，handleAgeChange，handleSkillsChange ..夸大它的荒谬。

因此，我想起了简单的问题，只需ref="name"我就可以ReactDOM.findDOMNode(this.refs.name).value得到它，但等等，它不会在<select>上工作，而且＃＆＃ 39;有时我使用ref，有时我会使用句柄功能。

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

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提交大表单

2 个答案: