Tabelas ReactJS

Neste capítulo, vamos aprender a usar formulários no React.

Exemplo simples

No exemplo a seguir, usaremos o formulário de entrada configuradovalue = {this.state.data}。Enquanto o valor de entrada mudar, o estado pode ser atualizado. Estamos usandoonChangeevento, que monitorará as mudanças de entrada e atualizará o estado correspondente.

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

Quando o valor do texto de entrada muda, o estado será atualizado.

Exemplo complexo

No exemplo a seguir, veremos como usar o formulário de um componente filho.onChangemétodo desencadeia a atualização do estado, que é passado para o componente de entrada filhovaluee apresentar na tela. O capítulo de eventos usou exemplos semelhantes. Cada vez que precisamos atualizar o estado de um componente filho, precisamos passar a função de tratamento update（updateState）função como prop（updateStateProp）passando。

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

Isso produzirá o seguinte resultado.