react可控元件和不可控元件

在react中的input標籤是有些小坑的，input本身就有自己的快取機制，然後react的state也有快取機制。這兩種快取機制我們在編碼中是要進行取捨的。將input中的value繫結到state的react元件就是可控元件，反之則是不可控元件。

先看乙個不可控的input**

//測試效果用

import react,  from 'react';
class myform extends component ;
}getinitialstate()
};handlechange(event) );
console.log(this.state.value)
};render() 
}export default myform;

原因是：

因為input標籤，沒有定義onchange 但是提供了value屬性。react會丟擲警告，並將元素設定為唯讀。

如果目標是唯讀字段，最好使用readonly屬性明確加以定義。這不僅會消除警告，也會確保**的可讀性。

可以新增readonly= ，或者直接新增readonly屬性，而不設定值，react會預設將該屬性的值設為true。

一。設定onchang，變成可控input

(1)直接在函式後面.bind(this)

//測試效果用

import react,  from 'react';
class myform extends component ;
}getinitialstate()
};handlechange(event) );
console.log(this.state.value)
};render() 
)}}export default myform;

//測試效果用

import react,  from 'react';
class myform extends component ;
this.handlechange = this.handlechange.bind(this);
}getinitialstate()
};handlechange(event) );
console.log(this.state.value)
};render() 
)}}export default myform;

//測試效果用

import react,  from 'react';
class myform extends component ;
}getinitialstate()
};// handlechange(event) );
//     console.log(this.state.value)
// };
render() );}} />
顯示你的value如下:
)}}export default myform;

//測試效果用

import react,  from 'react';
class myform extends component ;
}getinitialstate()
};render() 
)}}export default myform;

元件完成之後給它加上乙個onchange事件，發現是可以監控到變化值的。如果要獲得iput中的value值，需先拿到其dom節點，然後獲取其value值。

//測試效果用

import react,  from 'react';
import reactdom from 'react-dom';
class myform extends component ;
this.handlechange = this.handlechange.bind(this);
}getinitialstate()
};handlechange(event) );
};render() 
)}}export default myform;

React的可控元件和不可控元件

type text value 像這個 中，我們可以看出，value的值是由狀態來確定的，只要拿到this.state.helloto的值就可以。demo charset utf 8 可控元件title src js react.js script src js react dom.js scrip...

React表單應用 不可控元件

在input標籤中不把value繫結到state上的就是不可控元件，它的資料不合state對應，所以在開發時會給自己挖很多坑，但是不可控元件並不是不可掌控。先來做乙個最簡單的不可用元件。render function 元件完成之後給它加上乙個onchange事件，發現是可以監控到變化值的。如果要獲得...

React 可控控制項

什麼叫可控控制項什麼叫不可控控制項？當我們要獲取input value值的時候，我們只能通過ref來獲取。text defaultvalue 不可控元件 ref ipt onchange 這時候我們通過給defultvalue繫結資料this.state.text 可以通過事件驅動 這裡是oncha...