Réagir aux formulaires et aux événements
Dans ce chapitre, nous verrons comment utiliser les formulaires dans React.
Un exemple simple est
Dans l'exemple, nous définissons la valeur d'entrée de la zone de saisie value = {this.state.data}. Nous pouvons mettre à jour l'état lorsque la valeur de la zone de saisie change. Nous pouvons utiliser l'événement onChange pour écouter les changements d'entrée et modifier l'état.
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>php中文网 React 实例</title>
<script src="http://static.php.cn/assets/react/react-0.14.7/build/react.min.js"></script>
<script src="http://static.php.cn/assets/react/react-0.14.7/build/react-dom.min.js"></script>
<script src="http://static.php.cn/assets/react/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var HelloMessage = React.createClass({
getInitialState: function() {
return {value: 'Hello php!'};
},
handleChange: function(event) {
this.setState({value: event.target.value});
},
render: function() {
var value = this.state.value;
return <div>
<input type="text" value={value} onChange={this.handleChange} />
<h4>{value}</h4>
</div>;
}
});
ReactDOM.render(
<HelloMessage />,
document.getElementById('example')
);
</script>
</body>
</html>Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Le code ci-dessus affichera un élément d'entrée avec la valeur Hello php! et mettra à jour la valeur saisie par l'utilisateur via la réponse à l'événement onChange.
Exemple 2
Dans l'exemple suivant, nous allons montrer comment utiliser un formulaire sur un composant enfant. La méthode onChange déclenchera la mise à jour de l'état et transmettra la valeur mise à jour à la value de la zone de saisie du composant enfant pour restituer l'interface.
Vous devez créer un gestionnaire d'événements (handleChange) dans le composant parent et le transmettre à votre composant enfant en tant qu'accessoire (updateStateProp).
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>php中文网 React 实例</title>
<script src="http://static.php.cn/assets/react/react-0.14.7/build/react.min.js"></script>
<script src="http://static.php.cn/assets/react/react-0.14.7/build/react-dom.min.js"></script>
<script src="http://static.php.cn/assets/react/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var Content = React.createClass({
render: function() {
return <div>
<input type="text" value={this.props.myDataProp} onChange={this.props.updateStateProp} />
<h4>{this.props.myDataProp}</h4>
</div>;
}
});
var HelloMessage = React.createClass({
getInitialState: function() {
return {value: 'Hello php!'};
},
handleChange: function(event) {
this.setState({value: event.target.value});
},
render: function() {
var value = this.state.value;
return <div>
<Content myDataProp = {value}
updateStateProp = {this.handleChange}></Content>
</div>;
}
});
ReactDOM.render(
<HelloMessage />,
document.getElementById('example')
);
</script>
</body>
</html>Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Événement React
L'exemple suivant montre la modification des données via l'événement onClick :
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>php中文网 React 实例</title>
<script src="http://static.php.cn/assets/react/react-0.14.7/build/react.min.js"></script>
<script src="http://static.php.cn/assets/react/react-0.14.7/build/react-dom.min.js"></script>
<script src="http://static.php.cn/assets/react/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var HelloMessage = React.createClass({
getInitialState: function() {
return {value: 'Hello php!'};
},
handleChange: function(event) {
this.setState({value: 'php中文网'})
},
render: function() {
var value = this.state.value;
return <div>
<button onClick={this.handleChange}>点我</button>
<h4>{value}</h4>
</div>;
}
});
ReactDOM.render(
<HelloMessage />,
document.getElementById('example')
);
</script>
</body>
</html>Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Lorsque vous devez mettre à jour l'état du composant parent à partir de le composant enfant, vous devez Le composant parent crée un gestionnaire d'événements (handleChange) et le transmet à votre composant enfant en tant qu'accessoire (updateStateProp). Les exemples sont les suivants :
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>php中文网 React 实例</title>
<script src="http://static.php.cn/assets/react/react-0.14.7/build/react.min.js"></script>
<script src="http://static.php.cn/assets/react/react-0.14.7/build/react-dom.min.js"></script>
<script src="http://static.php.cn/assets/react/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var Content = React.createClass({
render: function() {
return <div>
<button onClick = {this.props.updateStateProp}>点我</button>
<h4>{this.props.myDataProp}</h4>
</div>
}
});
var HelloMessage = React.createClass({
getInitialState: function() {
return {value: 'Hello php!'};
},
handleChange: function(event) {
this.setState({value: 'php中文网'})
},
render: function() {
var value = this.state.value;
return <div>
<Content myDataProp = {value}
updateStateProp = {this.handleChange}></Content>
</div>;
}
});
ReactDOM.render(
<HelloMessage />,
document.getElementById('example')
);
</script>
</body>
</html>Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
