表单

诸如<input>、<textarea>和<option>的表单组件与其它原生（native）组件不同，因为它们可以通过用户交互而被改变。这些组件提供的接口使得管理表单对用户交互的响应更加容易。

传统表单事件

传统表单的提交

  1. <form action='https://www.baidu.com' method='GET'>
  2. //action表单提交的地址
  3. //method表单提交的方式（GET比较小的数据提交，POST比较保密的提交）
  4.     <input type="text" name="hello" placeholder="输入内容">
  5.     <button>提交</button>
  6.     //button作为提交按钮使用
  7. </form>

表单的事件

  • onSubimit（表单提交）
  • onChange（域的内容改变）
  • onInput（输入框内容的改变）
  • onBlur（失去焦点）//焦点事件
  • onFocus（获得焦点）//焦点事件input的type属性
值描述
button定义可点击按钮（多数情况下，用于通过 JavaScript 启动脚本）
checkbox定义复选框
file定义输入字段和 “浏览”按钮，供文件上传
hidden定义隐藏的输入字段
image定义图像形式的提交按钮
password定义密码字段。该字段中的字符被掩码
radio定义单选按钮
reset定义重置按钮。重置按钮会清除表单中的所有数据
submit定义提交按钮。提交按钮会把表单数据发送到服务器
text定义单行的输入字段，用户可在其中输入文本。默认宽度为 20 个字符
email定义邮箱

表单重置

  1. import React from 'react'
  3. class App extends React.Component {
  4.   handleSubmit(e){
  5.     e.preventDefault()
  6.     //preventDefault 阻止跳转方法
  7.     document.getElementById('form').reset()
  8.   }
  9.   render() {
  10.     return (
  11.       <div className="app">
  12.         <form action='https://www.baidu.com' method='GET' id='form' onSubmit={this.handleSubmit.bind(this)}>
  13.           <input type="text" name="hello" placeholder="输入内容" />
  14.           <button>提交</button>
  15.           <button type='reset'>重置</button>
  16.           //重置按钮
  17.         </form>
  18.       </div>
  19.     )
  20.   }
  21. }
  22. export default App

小贴士：reset()方法可把表单中的元素重置为它们的默认值

受控组件

非受控组件

  1. import React from 'react'
  3. class App extends React.Component {
  4.   render() {
  5.     return (
  6.       <div className="app">
  7.           <input type="text" placeholder="输入内容" value='123' />
  8.         </form>
  9.       </div>
  10.     )
  11.   }
  12. }
  13. export default App

一个没有value属性的<input>就是一个非受控组件。通过渲染的元素，任意的用户输入都会被立即反映出来。非受控的<input>只能通过OnChange函数来向上层通知自己被用户输入的更改。

可以用ref来拿到 输入的 value 值

  1. <input ref={value => this.username = value} />
  2. //this.username.value 拿到输入的值

注意：使用value代替defaultValue，会发现输入框的值无法改变

受控组件

表单的value值收到state的控制

  1. import React from 'react'
  3. class App extends React.Component {
  4.   constructor(){
  5.     super()
  6.     this.handleChange = this.handleChange.bind(this)
  7.     this.state = {
  8.       input:''
  9.     }
  10.   }
  11.   handleSubmit(e){
  12.     e.preventDefault()
  13.     let {input} = this.state
  14.   }
  15.   handleChange(e){
  16.     this.setState({
  17.       input:e.target.value
  18.       //触发事件目标对象的value
  19.     })
  20.   }
  21.   render() {
  22.     return (
  23.       <div className="app">
  24.         <form onSubmit={this.handleSubmit.bind(this)}>
  25.           <input value={this.state.input} onChange={this.handleChange} />
  26.           <button>提交</button>
  27.         </form>
  28.       </div>
  29.     )
  30.   }
  31. }
  32. export default App

表单的select，textarea输入

  1. import React from 'react'
  3. class App extends React.Component {
  4.   constructor(){
  5.     super()
  6.     this.state = {
  7.       textarea:'',
  8.       fruits:'banana'
  9.     }
  10.   }
  11.   handleSubmit(e){
  12.     e.preventDefault()
  13.     let {textarea,fruits} = this.state
  14.     console.log(textarea,fruits)
  15.   }
  16.   render() {
  17.     return (
  18.       <div className="app">
  19.         <form onSubmit={this.handleSubmit.bind(this)}>
  20.           <textarea cols="30" rows="10" value={this.state.textarea} onChange={e => this.setState({textarea:e.target.value})}></textarea><br/>
  21.           <select value={this.state.fruits} onChange={e => this.setState({fruits:e.target.value})}>
  22.             <option value="apple">苹果</option>
  23.             <option value="orange">橘子</option>
  24.             <option value="banana">香蕉</option>
  25.             //默认值通过state控制，使用selected会被警告
  26.           </select><br/>
  27.           <button type='submit'>提交</button>
  28.         </form>
  29.       </div>
  30.     )
  31.   }
  32. }
  33. export default App

表单的radio输入

  1. import React from 'react'
  3. class App extends React.Component {
  4.   constructor(){
  5.     super()
  6.     this.state = {
  7.             sex:'male'
  8.     }
  9.   }
  10.   handleSubmit(e){
  11.     e.preventDefault()
  12.     let obj = this.state
  13.     console.log(obj)
  14.   }
  15.   handleChange(e){
  16.     this.setState({
  17.       input:e.target.value
  18.     })
  19.   }
  20.   render() {
  21.     return (
  22.       <div className="app">
  23.         <form onSubmit={this.handleSubmit.bind(this)}>
  24.                     男<input type="radio" name='sex' value='male' onChange={e => this.setState({sex:e.target.value})}/>
  25.           女<input type="radio" name='sex' value='female' onChange={e => this.setState({sex:e.target.value})}/><br/>
  26.           <button type='submit'>提交</button>
  27.         </form>
  28.       </div>
  29.     )
  30.   }
  31. }
  32. export default App

表单的radio通过受控组件来控制checked的状态改变来修改，这种方法比较麻烦，所以我们用 非受控组件 来写表单的radio事件

  1. import React from 'react'
  3. class App extends React.Component {
  4.   constructor(){
  5.     super()
  6.     this.state = {
  7.             sex:'male'
  8.     }
  9.   }
  10.   handleSubmit(e){
  11.     e.preventDefault()
  12.     let obj = this.state
  13.     console.log(obj)
  14.   }
  15.   handleChange(e){
  16.     this.setState({
  17.       input:e.target.value
  18.     })
  19.   }
  20.   render() {
  21.     return (
  22.       <div className="app">
  23.         <form onSubmit={this.handleSubmit.bind(this)}>
  24.                     男<input type="radio" name='sex' value='male' checked={this.state.sex === 'male' ? true : false} onChange={e => this.setState({sex:e.target.value})}/>
  25.           女<input type="radio" name='sex' value='female' checked={this.state.sex === 'female' ? true : false} onChange={e => this.setState({sex:e.target.value})}/><br/>
  26.           <button type='submit'>提交</button>
  27.         </form>
  28.       </div>
  29.     )
  30.   }
  31. }
  32. export default App

表单的checnkbox输入

  1. import React from 'react'
  3. class App extends React.Component {
  4.   constructor(){
  5.     super()
  6.     this.state = {
  7.             agree:true
  8.     }
  9.   }
  10.   handleSubmit(e){
  11.     e.preventDefault()
  12.     let obj = this.state
  13.     console.log(obj)
  14.   }
  15.   handleChange(e){
  16.     this.setState({
  17.       input:e.target.value
  18.     })
  19.   }
  20.   render() {
  21.     return (
  22.       <div className="app">
  23.         <form onSubmit={this.handleSubmit.bind(this)}>
  24.                     我已阅读并同意<input type="checkbox" value='agree' onChange={e =>this.setState({agree:!this.state.agree})}/><br/>
  25.           <button type='submit'>提交</button>
  26.         </form>
  27.       </div>
  28.     )
  29.   }
  30. }
  31. export default App

checnkbox的多选

  1. import React from 'react'
  3. class App extends React.Component {
  4.   constructor(){
  5.     super()
  6.     this.handleCheck = this.handleCheck.bind(this)
  7.     this.state = {
  8.             hobby:[]
  9.     }
  10.   }
  11.   handleSubmit(e){
  12.     e.preventDefault()
  13.     let obj = this.state
  14.     console.log(obj)
  15.   }
  16.   handleChange(e){
  17.     this.setState({
  18.       input:e.target.value
  19.     })
  20.   }
  21.   handleCheck(e){
  22.     let hobby = this.state.hobby
  23.     let value = e.target.value
  24.     let index = hobby.indexOf(value)
  25.     console.log(index)
  26.     if(index === -1){
  27.       hobby.push(value)
  28.     }else{
  29.       hobby.splice(index,1)
  30.     }
  31.     this.setState({hobby})
  32.   }
  33.   render() {
  34.     return (
  35.       <div className="app">
  36.         <form onSubmit={this.handleSubmit.bind(this)}>
  37.                     兴趣爱好：<br/>
  38.           篮球<input type="checkbox" value='basketball' onChange={this.handleCheck}/><br/>
  39.           足球<input type="checkbox" value='football' onChange={this.handleCheck}/><br/>
  40.           排球<input type="checkbox" value='paiqiu' onChange={this.handleCheck}/><br/>
  41.           台球<input type="checkbox" value='taiqiu' onChange={this.handleCheck}/><br/>
  42.           <button type='submit'>提交</button>
  43.         </form>
  44.       </div>
  45.     )
  46.   }
  47. }
  48. export default App

表单的重置：通过设置state为空来重置表单

  1. import React from 'react'
  3. class App extends React.Component {
  4.   constructor(){
  5.     super()
  6.     this.state = {
  7.       input:''
  8.     }
  9.   }
  10.   handleSubmit(e){
  11.     e.preventDefault()
  12.     let obj = this.state
  13.     console.log(obj)
  14.   }
  15.   handleReset(){
  16.     this.setState({
  17.       input:''
  18.     })
  19.   }
  20.   render() {
  21.     return (
  22.       <div className="app">
  23.         <form onSubmit={this.handleSubmit.bind(this)} onReset={this.handleReset.bind(this)}>
  24.           <input type="text" value={this.state.input} onChange={e => this.setState({input:e.target.value})} />
  25.           <button type='submit'>提交</button>
  26.           <button type='reset'>重置</button>
  27.         </form>
  28.       </div>
  29.     )
  30.   }
  31. }
  32. export default App

处理多个输入

  1. import React from 'react'
  3. class Input extends React.Component {
  4.   constructor(){
  5.     super()
  6.     this.state = {
  7.       textarea:'',
  8.       fruits:'banana'
  9.     }
  10.   }
  11.   handleChange(type,e){
  12.     this.setState({
  13.       [type]:e.target.value
  14.     })
  15.   }
  16.   render() {
  17.     return (
  18.       <div>
  19.           <textarea
  20.               cols="30"
  21.               rows="10"
  22.               value={this.state.textarea}
  23.               onChange={this.handleChange.bind(this,'textarea')}>
  24.             </textarea><br/>
  25.           <select value={this.state.fruits} onChange={this.handleChange.bind(this,'fruits')}>
  26.             <option value="apple">苹果</option>
  27.             <option value="orange">橘子</option>
  28.             <option value="banana">香蕉</option>
  29.           </select><br/>
  30.           <button onClick={() => console.log(this.state)}>提交</button>
  31.       </div>
  32.     )
  33.   }
  34. }
  35. export default Input

注意：传入的type参数与对应state的名字

混合组件的优点

  • 支持传入默认值；
  • 可控：组件外部修改props可改变input组件的真实值及显示值；
  • 非可控：输入框中输入值，可同时改变input组件的真实值及显示值。