Trong bài này, chúng ta sẽ tìm hiểu cách tạo form để nhập dữ liệu trong React. Simple Example Trong ví dụ sau đây chúng ta sẽ khởi tạo 1 input form với value= {this.state.data}, dữ liệu trong form là state của component. Và chúng ta sẽ update state khi chúng ta thay đổi value trong input. Chúng ta sẽ sử dụng sự kiện onChange đê kiểm tra sự thay đổi trong input và update lại state, không dong dài nữa chúng ta cùng xem ví dụ để hiểu rõ hơn nào. App.js
Trang 1Bài 8: ReactJs - Tạo Forms trong React
Trong bài này, chúng ta sẽ tìm hiểu cách tạo form để nhập dữ liệu trong React.
Simple Example
Trong ví dụ sau đây chúng ta sẽ khởi tạo 1 input form với value= {this.state.data}, dữ liệu trong form là state của component Và chúng ta sẽ update state khi chúng ta thay
đổi value trong input Chúng ta sẽ sử dụng sự kiện onChange đê kiểm tra sự thay đổi
trong input và update lại state, không dong dài nữa chúng ta cùng xem ví dụ để hiểu rõ hơn nào
App.js
import React from 'react';
class App extends React Component {
constructor ( props ) {
super ( props );
this state = {
data : 'Initial data '
}
this updateState = this updateState bind ( this );
};
updateState ( e ) {
this setState ({ data : e target value });
}
Trang 2render () {
return (
<div>
< input type = "text" value = { this state data }
onChange = { this updateState } />
<h4>{ this state data }</ h4 >
</ div >
);
}
}
export default App ;
Biến e trong updateState là 1 synthetic event, hiên tại các bạn chưa cần quan tâm đến
nó đâu, mình sẽ nói rõ hơn về nó trong series React nâng cao
Index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
ReactDOM render (< App />, document getElementById ('app'));
Khi chạy chương trình các bạn sẽ được kết quả như sau:
Khi các bạn thay đổi giá trị trong input thì giá trị thẻ h4 cũng thay đổi theo (update
state-> render()).
Trang 3Complex Example
Trong ví dụ này, chúng ta sẽ sử dụng form ở ví dụ trên như 1 component và là con của component App Chúng ta sẽ chuyển state:data cùng với onChange event xuống cho form thông qua props( các bạn xem bài này nếu chưa biết về props, hiểu được props
sẽ dễ hiểu ví dụ này) Các bạn xem kĩ ví dụ này, bài sau sẽ lại đề cập đến nó đấy
App.js
import React from 'react';
class App extends React Component {
constructor ( props ) {
super ( props );
this state = {
data : 'Initial data '
}
this updateState = this updateState bind ( this );
};
updateState ( e ) {
this setState ({ data : e target value });
}
render () {
return (
<div>
< Content myDataProp = { this state data }
updateStateProp = { this updateState }></ Content >
</ div >
);
Trang 4}
}
class Content extends React Component {
render () {
return (
<div>
< input type = "text" value = { this props myDataProp }
onChange = { this props updateStateProp } />
<h3>{ this props myDataProp }</ h3 >
</ div >
);
}
}
export default App ;
Index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
ReactDOM render (< App />, document getElementById ('app'));
Kết quả:
End bài 8 tại đây, các bạn xem lại rồi thực hành biến tấu nhiều thêm để hiểu rõ hơn nha Nếu có thắc mắc gì bạn cứ comment bên dưới mình sẽ giải đáp trong vòng 24h