フォームwith material-ui

Question

私はログインとパスワードのTextFieldsとフォームを提出するRaisedButtonを使ってmaterial-uiで簡単なフォームを作成しようとしています。 RaisedButtonのイベントを処理してフォームを送信する最良の方法は何ですか？

Answer 1

あなたの最善の策は、反応を伴うフォームの使い方を学び、その部分を消してから材料に変換することです。

https://facebook.github.io/react/docs/tutorial.html

関連するコード：ここで

はそれがフォームを送信含まれて反応するから良いチュートリアルです

機能をレンダリング - フォーム

render: function() { 
return (
    <form className="commentForm" onSubmit={this.handleSubmit}> 
    <input 
     type="text" 
     placeholder="Your name" 
     value={this.state.author} 
     onChange={this.handleAuthorChange} 
    /> 
    <input 
     type="text" 
     placeholder="Say something..." 
     value={this.state.text} 
     onChange={this.handleTextChange} 
    /> 
    <input type="submit" value="Post" /> 
    </form> 
); 

のイベントハンドラを注意してくださいそしてここにコールバックの実装があります

handleSubmit: function(e) { 
e.preventDefault(); 
var author = this.state.author.trim(); 
var text = this.state.text.trim(); 
if (!text || !author) { 
    return; 
} 
// TODO: send request to the server 
this.setState({author: '', text: ''}); 

}、

あなたは、TextField

http://www.material-ui.com/#/components/text-field

そして、それのクールな機能を使用するには、入力要素を変換することにより、材料-UIにかけて、このサンプルを変換することができます。

この作品はチュートリアルに役立ちます

希望覆われている方法の詳細のすべて - 幸運を！

Answer 2

あなたが探しているイベントはonTouchTapで、react-tap-event-pluginをインストールする必要があります。これに関する指示は、ページ上部のhereにあります。

<RaisedButton label="Default" style={style} onTouchTap={yourEventHandler} /> 

これが役立ちます。

Answer 3

RaisedButtonなどのMaterial UIボタン要素にtype="submit"を追加すると、クリックすると送信ボタンとして機能します。フォームが送信されると、フォームのonSubmitがトリガーされ、handleSubmitコールバックが実行されます。

class MyForm extends React.Component { 
    constructor() { 
    super(); 
    this.state = {id: null}; 
    } 
    handleChange = (event) => { 
    this.setState({id: event.target.value}); 
    } 
    handleSubmit = (event) => { 
    //Make a network call somewhere 
    event.preventDefault(); 
    } 
    render() { 
    return( 
     <form onSubmit={this.handleSubmit}> 
      <TextField floatingLabelText="ID Number" onChange={this.change} />  
      <RaisedButton label="Submit" type="submit" /> 
     </form> 
    ) 
    } 
}