Comment obtenir les données à partir de documents-interface utilisateur TextField, DropDownMenu composants?
J'ai créer un formulaire, j'ai plusieurs TextField, DropDownMenu matériaux-composants de l'interface utilisateur inclus, la question est de savoir comment je peux collecter toutes les données de tous les objets textfield, DropDownMenus dans un obj et l'a envoyé sur le serveur. Pour TextField il a TextField.getValue() Retourne la valeur de l'entrée. Mais je ne peux pas comprendre comment l'utiliser.
var React = require('react'),
mui = require('material-ui'),
Paper = mui.Paper,
Toolbar = mui.Toolbar,
ToolbarGroup = mui.ToolbarGroup,
DropDownMenu = mui.DropDownMenu,
TextField = mui.TextField,
FlatButton = mui.FlatButton,
Snackbar = mui.Snackbar;
var menuItemsIwant = [
{ payload: '1', text: '[Select a finacial purpose]' },
{ payload: '2', text: 'Every Night' },
{ payload: '3', text: 'Weeknights' },
{ payload: '4', text: 'Weekends' },
{ payload: '5', text: 'Weekly' }
];
var menuItemsIcan = [
{ payload: '1', text: '[Select an objective]' },
{ payload: '2', text: 'Every Night' },
{ payload: '3', text: 'Weeknights' },
{ payload: '4', text: 'Weekends' },
{ payload: '5', text: 'Weekly' }
];
var menuItemsHousing = [
{ payload: '1', text: '[Select housing]' },
{ payload: '2', text: 'Every Night' },
{ payload: '3', text: 'Weeknights' },
{ payload: '4', text: 'Weekends' },
{ payload: '5', text: 'Weekly' }
];
var menuItemsIlive = [
{ payload: '1', text: '[Select family mambers]' },
{ payload: '2', text: 'Every Night' },
{ payload: '3', text: 'Weeknights' },
{ payload: '4', text: 'Weekends' },
{ payload: '5', text: 'Weekly' }
];
var menuItemsLifestyle = [
{ payload: '1', text: '[Select lifestyle]' },
{ payload: '2', text: 'Every Night' },
{ payload: '3', text: 'Weeknights' },
{ payload: '4', text: 'Weekends' },
{ payload: '5', text: 'Weekly' }
];
var menuItemsLifestyle2 = [
{ payload: '1', text: '[Select savings]' },
{ payload: '2', text: 'Every Night' },
{ payload: '3', text: 'Weeknights' },
{ payload: '4', text: 'Weekends' },
{ payload: '5', text: 'Weekly' }
];
var menuItemsIncome = [
{ payload: '1', text: '[Select your yearly income]' },
{ payload: '2', text: 'Every Night' },
{ payload: '3', text: 'Weeknights' },
{ payload: '4', text: 'Weekends' },
{ payload: '5', text: 'Weekly' }
];
var Content = React.createClass({
getInitialState: function() {
return {
//formData: {
// name: '',
// age: '',
// city: '',
// state: ''
//},
errorTextName: '',
errorTextAge: '',
errorTextCity: '',
errorTextState: ''
};
},
render: function() {
return (
<div className="container-fluid">
<div className="row color-bg"></div>
<div className="row main-bg">
<div className="container">
<div className="mui-app-content-canvas page-with-nav">
<div className="page-with-nav-content">
<Paper zDepth={1}>
<h2 className="title-h2">Now, what would you like to do?</h2>
<Toolbar>
<ToolbarGroup key={1} float="right">
<span>I want to</span>
<DropDownMenu
className="dropdown-long"
menuItems={menuItemsIwant}
//autoWidth={false}
/>
</ToolbarGroup>
</Toolbar>
<div className="clearfix"></div>
<Toolbar>
<ToolbarGroup key={2} float="right">
<span>So I can</span>
<DropDownMenu
className="dropdown-long"
menuItems={menuItemsIcan}
//autoWidth={false}
/>
</ToolbarGroup>
</Toolbar>
<h2 className="title-h2">Please, share a little about you.</h2>
<div className="clearfix"></div>
<Toolbar>
<ToolbarGroup key={3} float="right">
<span>I am</span>
<TextField
id="name"
className="text-field-long"
ref="textfield"
hintText="Full name"
errorText={this.state.errorTextName}
onChange={this._handleErrorInputChange}
/>
<span>and I am</span>
<TextField
id="age"
className="text-field-short"
ref="textfield"
hintText="00"
errorText={this.state.errorTextAge}
onChange={this._handleErrorInputChange}
/>
<span className="span-right-measure">years of age.</span>
</ToolbarGroup>
</Toolbar>
<div className="clearfix"></div>
<Toolbar>
<ToolbarGroup key={4} float="right">
<span>I</span>
<DropDownMenu
hintText="I"
menuItems={menuItemsHousing}
//autoWidth={false}
/>
<span>in</span>
<TextField
id="city"
ref="textfield"
className="text-field-long"
hintText="City"
errorText={this.state.errorTextCity}
onChange={this._handleErrorInputChange}
/>
<span>,</span>
<TextField
id="state"
ref="textfield"
className="text-field-short text-field-right-measure"
hintText="ST"
errorText={this.state.errorTextState}
onChange={this._handleErrorInputChange}
/>
</ToolbarGroup>
</Toolbar>
<div className="clearfix"></div>
<Toolbar>
<ToolbarGroup key={5} float="right">
<span>Where I live</span>
<DropDownMenu
className="dropdown-long"
menuItems={menuItemsIlive}
//autoWidth={false}
/>
</ToolbarGroup>
</Toolbar>
<div className="clearfix"></div>
<Toolbar>
<ToolbarGroup key={6} float="right">
<span>My lifestyle is</span>
<DropDownMenu
className="dropdown-short"
menuItems={menuItemsLifestyle}
//autoWidth={false}
/>
<span>and I've saved</span>
<DropDownMenu
className="dropdown-short"
menuItems={menuItemsLifestyle2}
//autoWidth={false}
/>
</ToolbarGroup>
</Toolbar>
<div className="clearfix"></div>
<Toolbar>
<ToolbarGroup key={7} float="right">
<span>My yearly household is about</span>
<DropDownMenu
className="dropdown-mobile"
menuItems={menuItemsIncome}
//autoWidth={false}
/>
</ToolbarGroup>
</Toolbar>
<div className="clearfix"></div>
<div className="button-place">
<FlatButton
onTouchTap={this._handleClick}
label="I'm done lets go!"
/>
<Snackbar
ref="snackbar"
message="Invalid input, please check and try again"
/>
</div>
</Paper>
</div>
</div>
</div>
</div>
</div>
);
},
_handleErrorInputChange: function(e) {
if (e.target.id === 'name') {
var name = e.target.value;
this.setState({
//name: name,
errorTextName: e.target.value ? '' : 'Please, type your Name'
});
} else if (e.target.id === 'age') {
var age = e.target.value;
this.setState({
//age: age,
errorTextAge: e.target.value ? '' : 'Check Age'
});
} else if (e.target.id === 'city') {
var city = e.target.value;
this.setState({
//city: city,
errorTextCity: e.target.value ? '' : 'Type City'
});
} else if (e.target.id === 'state') {
var state = e.target.value;
this.setState({
//state: state,
errorTextState: e.target.value ? '' : 'Type State'
});
}
},
_handleClick: function(e) {
this.refs.snackbar.show();
//TODO: find a way to change errorText for all empty TextField
if (this.refs.textfield && this.refs.textfield.getValue().length === 0) {
this.setState({
errorTextState: 'Type State',
errorTextCity: 'Type City',
errorTextAge: 'Check Age',
errorTextName: 'Please, type your Name'
});
}
}
});
module.exports = Content;
Je veux envoyé sur le serveur dans _handleClick méthode.
Vous devez vous connecter pour publier un commentaire.
Ajouter un
onChange
gestionnaire pour chacun de vosTextField
etDropDownMenu
éléments. Lorsqu'elle est appelée, enregistrer la nouvelle valeur de ces apports à lastate
de votreContent
composant. En rendu, de récupérer ces valeurs à partir destate
et de les transmettre à lavalue
prop. Voir Les Composants Commandés.Maintenant tout ce que vous avez à faire dans votre
_handleClick
méthode est de récupérer les valeurs de toutes vos entrées dethis.state
et de les envoyer au serveur.Vous pouvez également utiliser le
React.addons.LinkedStateMixin
pour rendre ce processus plus facile. Voir La Liaison Bidirectionnelle Aides. Le code précédent devient:onChange
gestionnaire pour l'DropDownMenu composant seront appelés avec les arguments suivants: cas, à, charge. Charge utile est sélectionnéMenuItem
's de la valeur. La clé est l'MenuItem
s'index. Voir la source: github.com/callemall/material-ui/blob/master/src/DropDownMenu/...utiliser la accepté de répondre /ce a été la réponse à une autre (déjà supprimé) question
@karopastal
ajouter un
ref
attribut à votre<TextField />
composant et d'appel getValue (), comme ceci:Composant:
À l'aide de getValue:
this.refs
a été/ est déprécié en faveur de l'utilisation contrôlée des composants. ne pas utiliser ce.onChange
fonction jusqu'à 5-6 fois, sur chaque frappe de touche. Utiliser ce qui correspond le mieux à la situation.Stateless function components cannot have refs.
flson code ne fonctionne pas pour moi. Pour ceux dans la même situation que vous, voici mon code légèrement différent:
<TextField ref='myTextField'/>
obtenir sa valeur à l'aide
this.refs.myTextField.input.value
La stratégie de l'acceptés réponse est correcte, mais voici un exemple général qui fonctionne avec la version actuelle de Réagir et de Matériaux à l'INTERFACE utilisateur.
Le flux de données doit être un moyen:
TextArea
s sont peuplées à partir de cet état initialstate
via lehandleChange
de rappel.state
est accessible à partir de laonClick
de rappel---il est maintenant, il a juste écrit sur la console. Si vous souhaitez ajouter de la validation, il pourrait y aller.(Remarque: Vous pouvez écrire un
handleChange
de rappel par MUI, afin de supprimer ce vilainevent.persist()
appel.)Voici la solution la plus simple je suis venu avec, nous obtenons la valeur de l'entrée créée par un matériau d'interface utilisateur textField :
espère que cette aide.
Face à ce problème après un long temps depuis que la question posée ici. lors de la vérification du matériel-code de l'interface utilisateur, j'ai trouvé qu'il est maintenant accessible par le biais de
inputRef
propriété.Ensuite Accéder à la valeur de ce genre.