在React中处理表单

如何在React应用程序中处理表单

表单是默认情况下可交互的少数HTML元素之一。

它们旨在允许用户与页面进行交互。

表格的常见用途?

  • 搜索
  • 联络表格
  • 购物车结帐
  • 登录和注册
  • 和更多!

使用React,我们可以使我们的表单更具交互性,并减少静态性。

在React中有两种处理表单的主要方法,它们在根本上有所不同:数据的管理方式。

  • 如果数据是由DOM处理的,我们称它们为不受控制的组件
  • 如果数据是由组件处理的,我们称它们为受控组件

可以想象,受控组件是大多数时候使用的组件。组件状态是事实的唯一来源,而不是DOM。但是有时您会被迫使用非控件组件,例如,当使用某些因其行为而固有地不受控制的表单字段时,例如<input type="file">场地。

当元素状态在由组件管理的表单字段中更改时,我们使用onChange属性。

class Form extends React.Component {
  constructor(props) {
    super(props)
    this.state = { username: '' }
  }

handleChange(event) {}

render() { return ( <form> Username: <input type=“text” value={this.state.username} onChange={this.handleChange} /> </form> ) } }

对于类组件,为了设置新状态,我们必须绑定thishandleChange方法,否则this无法从该方法内访问:

class Form extends React.Component {
  constructor(props) {
    super(props)
    this.state = { username: '' }
    this.handleChange = this.handleChange.bind(this)
  }

handleChange(event) { this.setState({ username: event.target.value }) }

render() { return ( <form> <input type=“text” value={this.state.username} onChange={this.handleChange} /> </form> ) } }

同样,我们使用onSubmit表单上的属性以调用handleSubmit提交表单时的方法:

class Form extends React.Component {
  constructor(props) {
    super(props)
    this.state = { username: '' }
    this.handleChange = this.handleChange.bind(this)
    this.handleSubmit = this.handleSubmit.bind(this)
  }

handleChange(event) { this.setState({ username: event.target.value }) }

handleSubmit(event) { alert(this.state.username) event.preventDefault() }

render() { return ( <form onSubmit={this.handleSubmit}> <input type=“text” value={this.state.username} onChange={this.handleChange} /> <input type=“submit” value=“Submit” /> </form> ) } }

使用钩子一切都更加简单:

const Form = props => {
  const [username, setUsername] = useState()

const handleChangeUsername = e => { setUsername(e.target.value) }

const handleSubmit = event => { alert(username) event.preventDefault() }

render() { return ( <form onSubmit={handleSubmit}> Username: <input type=“text” value={username} onChange={handleChangeUsername} /> </form> ) } }

表格中的验证可以在handleChange方法:您可以访问状态的旧值和新值。您可以检查新值,如果无效,则拒绝更新后的值(并以某种方式将其传达给用户)。

HTML表单不一致。他们有悠久的历史,这证明了这一点。然而,React使事情对我们来说更加一致,您可以使用它来获取(和更新)字段value属性。

这是一个textarea, 例如:

<textarea value={this.state.address} onChange={this.handleChange} />

同样的select标签:

<select value="{this.state.age}" onChange="{this.handleChange}">
  <option value="teen">Less than 18</option>
  <option value="adult">18+</option>
</select>

之前我们提到了<input type="file">场地。这有点不同。

在这种情况下,您需要通过分配ref属性到构造函数中定义的属性React.createRef(),并使用它在提交处理程序中获取它的值:

class FileInput extends React.Component {
  constructor(props) {
    super(props)
    this.curriculum = React.createRef()
    this.handleSubmit = this.handleSubmit.bind(this)
  }

handleSubmit(event) { alert(this.curriculum.current.files[0].name) event.preventDefault() }

render() { return ( <form onSubmit={this.handleSubmit}> <input type=“file” ref={this.curriculum} /> <input type=“submit” value=“Submit” /> </form> ) } }

这是不受控制的组件道路。状态存储在DOM中,而不是组件状态中(我们使用了注意this.curriculum访问上传的文件,并且没有触摸state

我知道您在想什么-除了这些基础知识之外,还必须有一个库可以简化所有表单处理工作,并自动执行验证,错误处理等等,对吗?有一个伟大的胶体

免费下载我的反应手册


更多反应教程: