質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

2回答

8708閲覧

React.jsで、ボタンによって異なる送信先にsubmitするには

退会済みユーザー

退会済みユーザー

総合スコア0

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2016/11/18 05:45

編集2022/01/12 10:55

やりたいことは表題のとおりです。
コードのイメージは以下。

class Application extends React.Component { constructor() { super(); this.state = ({ value: "" }) handleChange = this.handleChange.bind(this); handleSubmit = this.handleSubmit.bind(this); } handleChange(e) { setState({ value: e.target.value }); } handleSubmit() { // do something here } render() { return( <div> <form method="post"> <input type="text" name="text" value={this.state.value} onChange={this.handleChange} /> <button type="submit" onClick={this.handleSubmit}>送信先1</button> <button type="submit" onClick={this.handleSubmit}>送信先2</button> </form> </div> ); } }

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

twin_bird

2016/11/18 05:54

それぞれのonClickで別のaction属性を呼び出すようなロジックを書けばよいのでは??
退会済みユーザー

退会済みユーザー

2016/11/18 06:34

onClickしたときのハンドラで、どのようにaction属性を指定すればよいか教えていただけると助かります。。。
guest

回答2

0

buttonをvalueで区別して、そのパラメータをメソッドで利用してはいかがでしょうか?
サンプルを書き換えさせていただきました。

class Application extends React.Component { constructor() { super(); this.state = ({ value: "" }) handleChange = this.handleChange.bind(this); handleSubmit = this.handleSubmit.bind(this); } handleChange(e) { setState({ value: e.target.value }); } handleSubmit(e) { if (e.target.value === 1) { // do something here } else if (e.target.value === 2) { // do something here } } render() { return( <div> <form method="post"> <input type="text" name="text" value={this.state.value} onChange={this.handleChange} /> <button type="submit" value={1} onClick={e => this.handleSubmit(e)}>送信先1</button> <button type="submit" value={2} onClick={e => this.handleSubmit(e)}>送信先2</button> </form> </div> ); } }

投稿2017/01/31 05:53

ttaniguchi

総合スコア19

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

onClickは中に書いた関数に飛ばすことができるので、新たに、
handleSubmit(){

}

のような関数を作成するといいと思います。
例:
hundleSubmit1(){

}

あと、初期設定もしておくといいですね。

this.state = ({ value: "" }) handleChange = this.handleChange.bind(this); handleSubmit = this.handleSubmit.bind(this);

+ handleSubmit1 = this.handleSubmit1.bind(this);
}

あとはそれぞれ、
onClick={this.handleSubmit}
onClick={this.handleSubmit1}

とすれば、異なる送信先(異なる関数に)処理を任せられるので、望んだ処理が可能だと思います。

投稿2017/10/28 02:22

MOTOMUR

総合スコア195

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問