私はログインとパスワードのTextFieldsとフォームを提出するRaisedButtonを使ってmaterial-uiで簡単なフォームを作成しようとしています。 RaisedButtonのイベントを処理してフォームを送信する最良の方法は何ですか?フォームwith material-ui
3
A
答えて
3
あなたの最善の策は、反応を伴うフォームの使い方を学び、その部分を消してから材料に変換することです。
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にかけて、このサンプルを変換することができます。
この作品はチュートリアルに役立ちます
希望覆われている方法の詳細のすべて - 幸運を!
2
あなたが探しているイベントはonTouchTap
で、react-tap-event-plugin
をインストールする必要があります。これに関する指示は、ページ上部のhereにあります。
<RaisedButton label="Default" style={style} onTouchTap={yourEventHandler} />
これが役立ちます。
1
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>
)
}
}
関連する問題
- 1. MaterialUI水平フォーム
- 2. React + MaterialUi IconMenuとListItemでの処理アクション
- 3. MaterialUIを使用したツールバー内のアバター
- 4. MaterialUIにギャップがあります。AppBar
- 5. Google ReCAPTCHA with htmlフォーム
- 6. ZendフォームsetAttribs with json_encode
- 7. "Open with ..."既存のフォーム
- 8. Firefoxフォームsubmit with target = "_ blank"
- 9. フォームの選択(Spring MVC with fmt)
- 10. Rails 4 with jQuery - フォーム内のselect関数
- 11. Elasticsearch Java APIの移行フォームTermsFacetBuilder with AggregationBuilders
- 12. Macbook with java with java with
- 13. c#windowフォームDataTable with Image列並べ替え
- 14. フォーム提出のオブジェクトリストをスプリングにバインドする方法@RequestBody with Thymeleaf
- 15. Railsフォーム検証WIthデータベース呼び出しと確認
- 16. コントローラの動作を、RoR with hamlで確認フォームで実行
- 17. 複数のフォームをphp mysqlとjquery with tabsを使用して
- 18. Silverlight with Isolated Storage - SQLiteを使用したWindowsフォームからのポート
- 19. React with Redux状態で再レンダリングされるフォーム全体
- 20. Intellisense Xamarinフォームが動作しません - Visual Studio Enterprise with Update 3
- 21. WITH WITH BigQuery
- 22. SQL update with with
- 23. for ... with ... with
- 24. 。nearest with with()
- 25. "with with macro" C
- 26. Laravel Eloquent With()With()
- 27. 使用の違い@RequestMapping with with with method
- 28. WPF with MVC with WCF with async await pattern
- 29. ImageButton with AndroidAdapter with BaseAdapter
- 30. UIBarButtonItem with Facebook with Lines
これは、 ''を 'TextField'または' RaisedButton'に変換できないと思います。マテリアルUIコンポーネントには別のAPIがあります(私はまだ自分自身で正確な答えを探しています)。 – Patrick
ヘイ・パトリック、これを素材-uiに変換し、まだ見ていれば投稿します。 –
私は質問者ではないので、あなたの答えをどちらかの方法で選択することはできませんでしたが、あなたは ' 'を実行することができ、その小道具はネイティブ ''フォームを提出するために正しく動作します。私は今、私のコードでその正確なことが働いています。尋ねられたように実際に質問に答えるという点では、私は答えのマテリアルUIバージョンがおそらくもっと技術的に正しいと思う。 –
Patrick