جداول ReactJS

في هذا الفصل، سنتعلم كيفية استخدام النماذج في React.

مثال بسيط

في المثال التالي، سنستخدم نموذج إعداد المدخل.value = {this.state.data}. يمكن تحديث الحالة طالما تتغير قيمة المدخل. نحن نستخدمonChangeالحادث، وهو يقوم بمراقبة تغييرات المدخل ويقوم بتحديث الحالة بشكل مناسب.

App.jsx

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>
　　　　　　　　　　　　<input type = "text" value = {this.state.data}　
　　　　　　　　　　　　　　　onChange = {this.updateState} />
　　　　　　　　　　　　<h4>{this.state.data}</h4>
　　　　　　　　　</div>
　　　　　　);
　　　}
}
export default App;

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
ReactDOM.render(<App/>, document.getElementById('app'));

عندما يتم تغيير قيمة النص المدخل، يتم تحديث الحالة.

مثال معقد

في المثال التالي، سنرى كيف يمكن استخدام النموذج في المكون الفرعي.onChangeالطريقة ستنشط تحديث الحالة، والذي سيتم إرساله إلى المدخل الفرعيvalueويعرضها على الشاشة. تم استخدام مثال مشابه في فصل الحدث. كلما احتجنا إلى تحديث حالة المكون الفرعي، يجب علينا تقديم معالج update (updateState）الوظيفة كـprop (updateStateProp）إرسالها.

App.jsx

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>
　　　　　　);
　　　}
}
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;

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
ReactDOM.render(<App/>, document.getElementById('app'));

سيكون هناك نتيجة مثل هذه.