Al momento dell'invio del modulo, voglio mostrare "Please wait .." e all'invio riuscito dei dati restituiti dal server. Usando jQuery, è facile da fare. Ma dovrebbe esserci un modo React in quanto a React non piace un tale tipo di manipolazione DOM diretta - penso. 1) Ho ragione? 2) Come mostrare il messaggio in (non dopo) l'invio del modulo?react.js - mostra un messaggio su e dopo l'invio del modulo
var FormComp = React.createClass({
handleSubmit:function(){
var userName=this.refs.userName.getDOMNode().value.trim();
var userEmail= this.refs.userEmail.getDOMNode().value.trim();
if(!userName || !userEmail){
return;
}
this.props.onFormSubmit({userName:userName, userEmail:userEmail,url:"/api/submit"});
this.refs.userName.getDOMNode().value='';
this.refs.userEmail.getDOMNode().value='';
return;
},
render: function() {
var result=this.props.data;
return (
<div className={result}>{result.message}</div>
<form className="formElem" onSubmit={this.handleSubmit}>
Name: <input type="text" className="userName" name="userName" ref="userName" /><br/>
Email: <input type="text" className="userEmail" name="userEmail" ref="userEmail" /><br/>
<input type="submit" value="Submit" />
<form >
</div>
);
}
});
var RC= React.createClass({
getInitialState: function() {
return {data: ""};
},
onFormSubmit:function(data){
$.ajax({
url: this.props.url,
dataType: 'json',
type: 'POST',
data: data,
success: function(data) {
this.setState({data: data});
}.bind(this),
error: function(xhr, status, err) {
console.error(this.props.url, status, err.toString());
}.bind(this)
});
},
render:function(){
return <FormComp onFormSubmit={this.onFormSubmit} data={this.state.data}/>
}
});
React.render(
<RC/>,
document.getElementById('content')
);
si può avere uno sguardo a un altro Reagire domanda qui - http://stackoverflow.com/questions/27913004/react-js-render-a -componente-da-fuori-reagire? –
non dovrebbe il 'userName' e' userEmail' all'interno di 'handleSubmit' dovrebbero essere calcolati da' refs' invece di 'state'? –
Oops, mi dispiace. Hai dimenticato di gestire le modifiche di input, quindi lo stato è sempre aggiornato. Trovo che sia meglio memorizzare intenzionalmente quello stato, invece di archiviare in elementi dom. Ti dà più opzioni se decidi di cambiare il modo in cui funzionano le cose. – Shawn