react可控组件和不可控组件

在React中的input标签是有些小坑的，input本身就有自己的缓存机制，然后React的State也有缓存机制。这两种缓存机制我们在编码中是要进行取舍的。将input中的value绑定到state的React组件就是可控组件，反之则是不可控组件。

先看一个不可控的input代码

1. //测试效果用
   
2. import React, { Component } from 'react';
   
3. 
   
4. class MyForm extends Component {
   
5.     constructor(props) {
   
6.         //super指代父类的实例（即父类的this对象）
   
7.         super(props);
   
8.         this.state = {
   
9.             username: '',
   
10.             gender: 'man',
    
11.             checked: true,
    
12.             value: 'ferrysoul'
    
13.          };
    
14.     }
    
15.     getInitialState(){
    
16.     return { value: 'ferrysoul' }
    
17. };
    
18. handleChange(event) {
    
19.     this.setState({ value: event.target.value });
    
20.     console.log(this.state.value)
    
21. };
    
22. render() {
    
23.     return (

复制代码

不可控的input无法改变值，不管你怎么敲击键盘输入，input中的数值不会发生任何改变，打开控制台会有一个报错信息，

原因是：

因为input标签，没有定义onChange 但是提供了value属性。React会抛出警告，并将元素设置为只读。

如果目标是只读字段，最好使用readOnly属性明确加以定义。这不仅会消除警告，也会确保代码的可读性。

解决：

可以添加readOnly={true} ，或者直接添加readOnly属性，而不设置值，React会默认将该属性的值设为true。

一。设置onchang，变成可控input

(1)直接在函数后面.bind(this)

1. //测试效果用
   
2. import React, { Component } from 'react';
   
3. 
   
4. class MyForm extends Component {
   
5.     constructor(props) {
   
6.         //super指代父类的实例（即父类的this对象）
   
7.         super(props);
   
8.         this.state = {
   
9.             username: '',
   
10.             gender: 'man',
    
11.             checked: true,
    
12.             value: 'ferrysoul'
    
13.          };
    
14.     }
    
15.     getInitialState(){
    
16.     return { value: 'ferrysoul' }
    
17. };
    
18. handleChange(event) {
    
19.     console.log(event.target.value)
    
20.     this.setState({ value: event.target.value });
    
21.     console.log(this.state.value)
    
22. };
    
23. render() {
    
24.     return (

复制代码