Таблицы 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'));

Это приведет к следующим результатам.