React受控组件中不同域数据的获取方式

深碍√TFBOYSˉ_ 2022-12-29 02:24 132阅读 0赞

### 受控组件 ###

*  什么是受控组件
 *  核心代码
 *   *   *  案例
 *  不同域数据的获取方式
 *  合并处理

# 什么是受控组件 #

1.  受控组件通常指的是表单，因为表单是可输入的，必须有对应的状态与之绑定
2.  React 将 `state`与表单的 `value`值绑定到一起
3.  给表单元素绑定`change`事件，将表单元素的值设置为state的值，接收表单值变化

# 核心代码 #

**第一步：在state中设置数据**

state = { 
        username: 'admin'
    }

**第二步：表单域中将 state中的数据与value绑定**

此时，value与username绑定，所以文本框中默认写入 admin

**第三步：给表单绑定`onChange`事件**

**第四步：事件函数中调用 setState 将数据进行保存**

handleText = (e) => { 
        this.setState({ 
            username: e.target.value
        })
    }

参数: e 是事件对象  
（对`e`不了解的同学，指路==>[事件处理][Link 1]）  
`e.target` 中保存了标签的 DOM 对象  
`e.target.value` 保存了input中的value值  
`e.target.name`保存了input的name值

效果：  
![在这里插入图片描述][20201219172700721.png]

### 案例 ###

获取用户名文本框中的内容，并打印出来

import React from 'react'
    import ReactDOM from 'react-dom'
    
    class App extends React.Component { 
      state = { 
        account: ''
      }
    
      checkLogin = () => { 
        console.log(this.state)
      }
    
      // 文本框内容变化时数据的处理函数
      handleAccount = e => { 
        console.log(e)
        this.setState({ account: e.target.value})
      }
    
      render () { 
        return (
          <div>
            账号: <input type="text" value={ this.state.account} onChange={ this.handleAccount} /><br />
            <button onClick={ this.checkLogin}>登录</button>
          </div>
        )
      }
    }
    
    ReactDOM.render(<App />, document.querySelector('#app'))

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ_size_16_color_FFFFFF_t_70]

# 不同域数据的获取方式 #

*  每个域都要将 value 和 state 中对应的属性绑定
 *  **每个域都要绑定 onChange 事件**

举例： 点击登录按钮，将文本框中的值输出到终端

给input、select、textarea表单域分别绑定onChange事件

import React from 'react'
    import ReactDOM from 'react-dom'
    class App extends React.Component { 
      state = { 
        account: '',
        city: '',
        desc: ''
      }
      handleAccount = e => { 
        this.setState({ 
          account: e.target.value
        })
      }
    
      handleCity = e => { 
        this.setState({ 
          city: e.target.value
        })
      }
    
      handleDesc = e => { 
        this.setState({ 
          desc: e.target.value
        })
      }
      submit = () => { 
        console.log(this.state)
      }
      
      render () { 
        return (
          <div>
            账号: <input type="text" value={ this.account} onChange={ this.handleAccount} /><br />
            城市: <select value={ this.city} onChange={ this.handleCity}>
                    <option value="bj">北京</option>
                    <option value="sh">上海</option>
                    <option value="sz">深圳</option>
                    <option value="xa">西安</option>
                  </select><br />
            描述: <textarea value={ this.desc} onChange={ this.handleDesc}></textarea><br />
            <button onClick={ this.submit}>登录</button>
          </div>
        )
      }
    }
    
    ReactDOM.render(<App />, document.querySelector('#app'))

最初效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ_size_16_color_FFFFFF_t_70 1]  
当我们输入数据之后，根据每个域的属性绑定，点击登录按钮,终端会显示出我们输入的数据  
![在这里插入图片描述][20201220172810642.png]

# 合并处理 #

核心： e.target

*  `e.target.value` : 保存了标签中的value值
 *  `e.target.name`：保存了标签中的name值

每个域中name属性绑定 state 中对应的属性， onChange指定一个函数统一处理

import React from 'react'
    import ReactDOM from 'react-dom'
    class App extends React.Component { 
      state = { 
        account: '',
        city: '',
        desc: ''
      }
    
      handleForm = e => { 
        const { name, value} = e.target
        this.setState({ 
          [name]: value 
        })
      }
    
      submit = () => { 
        console.log(this.state)
      }
    
      render () { 
        return (
          <div>
            账号: <input name="account" type="text" value={ this.account} onChange={ this.handleForm} /><br />
            城市: <select name="city" value={ this.city} onChange={ this.handleForm}>
                    <option value="bj">北京</option>
                    <option value="sh">上海</option>
                    <option value="sz">深圳</option>
                    <option value="xa">西安</option>
                  </select><br />
            描述: <textarea name="desc" value={ this.desc} onChange={ this.handleForm}></textarea><br />
            <button onClick={ this.submit}>登录</button>
          </div>
        )
      }
    }
    
    ReactDOM.render(<App />, document.querySelector('#app'))

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ_size_16_color_FFFFFF_t_70 2]

[Link 1]: https://blog.csdn.net/PILIpilipala/article/details/111202722
[20201219172700721.png]: /images/20221120/0e8775ded6cc48949c20354c8a81f48e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ_size_16_color_FFFFFF_t_70]: /images/20221120/1411b0c5874d4a8fb7c175ac88542d9d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ_size_16_color_FFFFFF_t_70 1]: /images/20221120/44020813cd3b44dcbdcfb7e56c1b5ac3.png
[20201220172810642.png]: /images/20221120/c27b294ad7c548ff92077069b17bd504.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ_size_16_color_FFFFFF_t_70 2]: /images/20221120/7b9676a2584141f9b2f78adf3c4fe9ff.png