ReactJS - 表单_ReactJS 菜鸟教程

在本章中，我们将学习如何在 React 中使用表单。

简单示例

在以下示例中，我们将设置一个值为 = {this.state.data} 的输入表单。这允许在 input 值发生变化时更新 state。我们使用 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'));

当输入文本值发生变化时，状态将更新。

React Forms Simple

复杂示例

在下面的示例中，我们将看到如何使用子组件中的表单。onChange 方法将触发状态更新，该更新将传递给子输入值并在屏幕上呈现。事件一章中使用了类似的示例。每当我们需要从子组件更新 state 时，我们需要将处理更新的函数（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'));

这将产生以下结果。

<< ReactJS - add expense ReactJS - expense manager api >>