常連

仕事の都合でReactを初めまして、Material-UIの使い方がよく分かっておりません、、
やりたいこととしては、SNSの「いいねボタン」に似たものを作ることです。

MaterialUIのサイトから持ってきたハートアイコンを使おうと思います。
それをボタンとしての役割にする方法が分からず質問です。

# 実際に書いたコード
最初は
```SnsList.js
import React, { Component } from 'react';
import FavoriteBorderIcon from '@material-ui/icons/FavoriteBorder';

class Sns extends Component {
  render() {
    return(
        <FavoriteBorderIcon onClick = {() => this.props.SnsPost()}/>
    );
  }
}
```
でしたが、当然ただアイコンが表示されただけでしたので、buttonタグで囲みました。
```React
import React, { Component } from 'react';
import FavoriteBorderIcon from '@material-ui/icons/FavoriteBorder';

class Sns extends Component {
  render() {
    return(
        <button><FavoriteBorderIcon onClick = {() => this.props.SnsPost()}/></button>
    );
  }
}
```
この実行結果が以下の写真となります（左のゴミ箱マークは今回は質問対象外です）
![イメージ説明](2f2b50fbc495ce8eb25b10c61bc832c1.png)

# 実現したいこと

**ハートアイコンそのものをボタンとして機能させること**

buttonタグを使うと、ハートアイコンはボタンとして処理できるのですが、これをハートアイコンだけにするにはどうすれば良いでしょうか（ハートを囲っているグレー部分を無くす）

これを押すと右側にいいねの数をカウントしていきたいと思っています。

# 補足

※stateはApp.jsで保持しており、
```
onClick = {() => this.props.SnsPost()}
```
の
```
SnsPost()
```
はApp.jsファイルで定義します。

また、Firebaseやreduxなどは使用しません。

ご存知の方がいらっしゃいましたら、ご教示いただけますと幸いです。
よろしくお願いいたします。

# 解決したコード

回答いただいたbuttonタグにonClick処理を書き込みました。

一度失敗した例
```React
<button onClick = {() => this.props.SnsPost()}><FavoriteBorderIcon /></button>
```
これだと変わらずグレーの四角に囲まれたままでした。

Buttonで解決しました。
```React
import { Button } from '@material-ui/core';

<Button onClick = {() => this.props.SnsPost()}><FavoriteBorderIcon /></Button>
コード
```
左のゴミ箱マークはただのアイコンなので少し位置がずれていますが、マウスを当てたらグレーがかります。
マウスあてる前↓
![イメージ説明](61542d5c50fa16eef2e2b19407630e6d.png)
マウスあてた時↓
![イメージ説明](0eecff6e07c981126c354ef8cec35657.png)

React：Meterial-UIを使ったクリック処理

### 実現したいこと
JS初心者で勉強中です。
サムネイル画像をクリックしたらメイン画像を切り替えるところまではできたのですが、
選択している画像のサムネイル画像をもう一度押したらメイン画像を消すことをやりたいのですがうまくできません。
それと、選択中のサムネイル画像の<li>のタグにactiveのクラスの付与させたいです。



### 該当のソースコード

```ここに言語名を入力
<script>
var selectimg = document.querySelectorAll('.select-imgsrc');
for (var i =0 ; i < selectimg.length; i++ ) {
	selectimg[i].onclick = function() {
		document.getElementById('select-img').src = this.dataset.selectimgsrc;
	};
}
</script>
```

```ここに言語名を入力
<div>
	<img id="select-img" src=""> 
</div>
<ul>
	<li class="select-img_list"><img src="selectimg.jpg" class="select-imgsrc" data-selectimgsrc="selectimg.jpg"></li>
	<li class="select-img_list"><img src="selectimg2.jpg" class="select-imgsrc" data-selectimgsrc="selectimg2.jpg"></li>
	<li class="select-img_list"><img src="selectimg3.jpg" class="select-imgsrc" data-selectimgsrc="selectimg3.jpg"></li>
</ul>
```

### 試したこと

googleで色々模索しましたがヒントになるようなものを見つけられませんでした。

サムネイル画像をクリックしてメイン画像を切り替え、もう一度クリックで画像を消す

添付画像のように、「文字を描く」ボタンを押すと、画像に文字が表示されるscriptを実装したいです。
![イメージ説明](6152e3cc57e16ab9e8d1f6b8740f8881.png)

「文字を描く」ボタンを押すと、
「Uncaught ReferenceError: drawText is not defined　at HTMLButtonElement.onclick」 
というエラーが解決できません。。。

また、function loadImage(id)で読み込んでいる画像も出力されません。

```HTML
<div onload="loadImage('preview');">
  <p><canvas id="preview"></canvas></p>
     <p>
        <input type="text" id="canvas_text" value="我輩は犬である">
        <button onclick="drawText('preview', 'canvas_text');">文字を描く</button>
     </p>
</div>
```

```javascript
//キャンバスに画像を描画する
function loadImage(id)
{
    //画像を読み込んでImageオブジェクトを作成する
    var image = new Image();
    image.src = '/images/canvas.png';
    image.onload = (function () {
        //画像ロードが完了してからキャンバスの準備をする
        var canvas = document.getElementById(id);
        var ctx = canvas.getContext('2d');
        //キャンバスのサイズを画像サイズに合わせる
        canvas.width = image.width;
        canvas.height = image.height;
        //キャンバスに画像を描画（開始位置0,0）
        ctx.drawImage(image, 0, 0);
    });
}
//キャンバスに文字を描く
function drawText(canvas_id, text_id)
{
    var canvas = document.getElementById(canvas_id);
    var ctx = canvas.getContext('2d');
    var text = document.getElementById(text_id);
    //文字のスタイルを指定
    ctx.font = '32px serif';
    ctx.fillStyle = '#404040';
    //文字の配置を指定（左上基準にしたければtop/leftだが、文字の中心座標を指定するのでcenter
    ctx.textBaseline = 'center';
    ctx.textAlign = 'center';
    //座標を指定して文字を描く（座標は画像の中心に）
    var x = (canvas.width / 2);
    var y = (canvas.height / 2);
    ctx.fillText(text.value, x, y);
}
```

HTML内に<script></script>で囲って上記scriptを書くと正常に動作しましたが、app.jsファイルにscriptを書くとエラーになります。

どこが間違えているのでしょうか？
よろしくお願いします。

<button>タグをクリックするとUncaught ReferenceErrorというエラーが出る。

あるサイトで下記の様にonclickでページ移動するボタンがあります。
そのボタンをseleniumでクリックし、ページを移動したいのですがなかなか上手くいきません。

```HTML
<form name="ff" id="ff" action="reg.php" method="post" enctype="multipart/form-data" onsubmit="return false;">
<input type="button" value="修正" onClick="A_re(this.form,23);">
<input type="button" value="修正" onClick="A_re(this.form,74);">
<input type="button" value="修正" onClick="A_re(this.form,448);">
<input type="button" value="修正" onClick="A_re(this.form,198);">
</form>
```
参考にさせて頂いたサイトでは、execute_scriptなるもので実行できるとのことでしたができず、こちらに質問させていただきました。
下記がコードです。

```python
browser.execute_script("A_re(this.form,23)")
```

実際のコードではbuttonが100近く有り、最終的にすべてのbuttonをクリックし、クリック先の要素をすべて取得する必要があります。

（1）最初のbuttonをクリック
↓
（2）ページ移動先で要素を取得
↓
（3）前のページに戻る
↓
（4）次のbuttonをクリック
↓
（5）ページ移動先で要素を取得

詳しい方がいらっしゃいましたらアドバイスをいただけないでしょうか？よろしくお願いします。

seleniumでjavascriptのonclickを実行したい

初歩的なことかもしれませんが教えて下さい。
```html
<input type="button" value="押" id="RRR" onclick="RanRan();onclick='disabled = true;'">

<audio id="sound">
<source src= "/audio/hogehoge.mp3" type="audio/mp3">
</audio>
```

```javascript

window.addEventListener('load', function(){
	var option = {
	once: true
	};
	document.getElementById("RRR").addEventListener('click', RanRan);});

function RanRan() {
		
	document.getElementById("sound").load();
   	document.getElementById("sound").play();
}

```

#解決したい点

id sound　にあるmp3を鳴らすようにしています。

この状態ですと、押せば押すだけならせるので
最初の１回だけ。または２回だけならせるようにしたいのですがどのように設定すればいいかわかりません。

Jquery の　.one('click', function() {　のようなことをしたいです。

非常に初歩的なことかもしれませんが教えてもらえますと助かります。


※追記してみましたが、これでも何度もなってしまいます。

最初の１回だけJavascriptを実行したい

### 前提・実現したいこと

Reactの練習で自己紹介ページを作っています。
自己紹介編集画面をReactModalを用いて作成しようと試みています。
SAVEボタンを押したときに、データを保存しModalWindowを閉じる処理を同時に行うように実装を行いたかったのですが
うまく行きませんでした。
onCliickの中でコンマを使えないのは知っているのですが、ボタンクリックされたときに2つの処理を実行させたいです。
ちなみにキャンセルボタンは想定通りの動きをし、`this.saveProfile`のみならデータは想定通りに保存されています。
ご教授いただけますと幸いです。

### 該当のソースコード

親コンポーネント
```JavaScript
    openModal = () => {
        this.setState({isModalOpen: true})
    }

    closeModal = () => {
        this.setState({isModalOpen: false})
    }

    render(){
        return (
            <div>
                <h2>Profile</h2>
                <Button
                    label={'Edit Profile'}
                    onClick={this.openModal}
                />
                <EditProfile 
                    openModal = {this.state.isModalOpen}
                    onClose = {this.closeModal}
                />
            </div>
        )
    }
```
子コンポーネント
```JavaScript
render(){
        return(
            <div>
                <ReactModal
                    isOpen = {this.props.openModal}
                >
　　　　　　　　　　　・・・
　　　　　　　　　　　<名前や年齢などのプロフィールをInputで入力します。略>
                    ・・・
　　　　　　　　　　　<Button
                        label={'Save'}
                        onClick = {
                            this.saveProfile,
                            this.props.onClose
                        }
                    />
                    <Button
                        label={'Cancel'}
                        onClick={this.props.onClose}
                    />
                </ReactModal>
            </div>
        )
    }
```

### 試したこと

下記などを参考にonClickで複数の処理の実行ができないか試したのですが、うまく実装することができませんでした。
[https://www.366service.com/jp/qa/b582191adb9bfb525d728951fcbafb7a
](https://www.366service.com/jp/qa/b582191adb9bfb525d728951fcbafb7a)

【React】【ReactModal】onClickで複数の処理を行いたい

現在、Javaでfacebookアプリを開発しているのですが、
下記のエラーが出てしまい原因がわからず困っています。
```jsp
<a href="" onclick="document.form.submit();return false;">
</a>
```
上記のonclickのsubmitによって
```jsp
<form action="リンク先" method="POST" name="form">
</form>
```
のリンク先にアクセスしたいのですが、
２つの不具合によりリンク先に飛べません。

下記に問題のページの実際のコードを記載いたします。
```jsp
<form action="YourSelectEngineer?MatchingDetailEngineer" method="POST" name="blueForm<c:out value='${ loop.count }'/>">
      <input type="hidden" name="switch" value="MatchingDetailEngineer">
      <input type="hidden" name="engineerid" value="${ engineerlist.engineerid }">
     <input type="submit" name="sbt<c:out value='${ loop.count }'/>" value="送信" style="visibility:hidden">
      </form>
      <a href="" class="list" onclick="document.blueForm<c:out value='${ loop.count }'/>.sbt<c:out value='${ loop.count }'/>.click();">
          <div class="row p-profile_box_blue c-box_padding20">
              <div class="layout-box">
                  <div class="layout-box_left c-center">
                      <figure>
                          <div class="c-photobox">
                              <img src="${ engineerlist.photo }?width=120&height=120" class="img-circle c-photo">
                          </div>
                      </figure>
                      <div class="c-name">
                      <p>${ engineerlist.name }(${ engineerlist.age })</p>
                      </div>
                  </div>
                  <div class="layout-box_right">
                		<nav class="c-position">
                    		<ul class="nav nav-stacked">
            					<li class="c-matchingbox_info">
                            		<img src="image/position.png" class="c-mini_logo" style="float:left">
                            		<ul class="nav" style="float:left">
                                        <c:if test="${ engineerlist.projectmanager == true }" var="projectmanager"/>
                                    <li><c:if test="${projectmanager}">プロジェクトマネージャー<br></c:if><c:if test="${!projectmanager}"></c:if></li>
                                        <c:if test="${ engineerlist.projectleader == true }" var="projectleader"/>
                                    <li><c:if test="${projectleader}">プロジェクトリーダー<br></c:if><c:if test="${!projectleader}"></c:if></li>
                                        <c:if test="${ engineerlist.engineer == true }" var="engineer"/>
                                    <li><c:if test="${engineer}">システムエンジニア<br></c:if><c:if test="${!engineer}"></c:if></li>
                                        <c:if test="${ engineerlist.programer == true }" var="programer"/>
                                    <li><c:if test="${programer}">プログラマー<br></c:if><c:if test="${!programer}"></c:if></li>
                                        <c:if test="${ engineerlist.director == true }" var="director"/>
                                    <li><c:if test="${director}">ディレクター<br></c:if><c:if test="${!director}"></c:if></li>
                                        <c:if test="${ engineerlist.coder == true }" var="coder"/>
                                    <li><c:if test="${coder}">コーダー<br></c:if><c:if test="${!coder}"></c:if></li>
                                        <c:if test="${ engineerlist.designer == true }" var="designer"/>
                                    <li><c:if test="${designer}">デザイナー<br></c:if><c:if test="${!designer}"></c:if></li>
                                        <c:if test="${ engineerlist.tester == true }" var="tester"/>
                                    <li><c:if test="${tester}">テスター<br></c:if><c:if test="${!tester}"></c:if></li>
                                </ul>
                           </li>
                          <li class="c-matchingbox_info">
                                  <img src="image/duration.png" class="c-mini_logo_year">
                                  ${ engineerlist.years_of_experience }年
                          </li>
                          <li class="c-matchingbox_info c-list-pr_textover">
                                  <img src="image/miniindustry_logo.png" class="c-mini_logo_pr">
                                  <div class="c-miniprbox">
                                  ${ engineerlist.introduction }
                                  </div>
                          </li>
                        </ul>
                      </nav>
                  </div>
              </div>
          </div>
      </a>
```
本来であれば、aタグで囲まれた箇所にカーソルを合わせれば、
プロジェクト名/YourSelectEngineer?MatchingDetailEngineer
との記載がされてリンク先に飛べると思うのですが、
ページの上部に移動するだけでリンク先にアクセスできません。

同じページでこの現象とは別にもうひとつの現象が起こります。
その現象はfacebookのaccessTokenを用いて、
セッション管理のもと、このページにアクセスしてきた際に起こります。
accessTokenを使っているJavaのコードの一部を下記に示します。
```Java
HttpSession ses = request.getSession(true);
        
        long fbid = Long.parseLong(map.get("userId"));
        EntryDao entrydao = new EntryDao();
        try{
        	//新規登録時の処理
        	entrydao.connect();
        	entrydao.insertAccount(beans);//エラーを返したら登録済み
        	int userid = entrydao.selectUserID(fbid).getUserid();
        	ses.setAttribute("userid", userid);
        	entrydao.close();
        	response.sendRedirect("tos.html");
        }catch(Exception ex){
        	ex.printStackTrace();
        	//insert出来なかったときのException内容
        	try{
        		//ログイン済みであるからfbidよりuseridの取得
        		//メインページに移動する
        		//クライアントとしてログイン時
        		int userid = entrydao.selectUserID(fbid).getUserid();
        		ses.setAttribute("userid", userid);
        		int clientid = entrydao.selectClientID(userid).getClientid();
        		ses.setAttribute("clientid", clientid);
        		ClientProfileDao clientdao = new ClientProfileDao();
        		clientdao.connect();
        		clientdao.selectClientProfile(clientid);
        		clientdao.close();
        		entrydao.close();
        		request.getRequestDispatcher("SearchEngineerList?page=1").forward(request, response);
        	}catch(Exception e){
        		e.printStackTrace();
```
これで、先ほどのページにアクセスした直後にaタグで囲まれた部分にカーソルを合わせると、
「上記のクラス?アクセストークン」
といった形でURLに表示されて、クリックすると、
```java
HTTPステータス 500 - Server returned HTTP response code: 400 for URL: 
```
のエラーが出てしまいます。

原因が全くわからず困り果てています。
同じような形式のページ全てで同じ現象が起こります。
何卒よろしくお願いいたします。

JSPにおいてaタグのonclickでformのリンクをsubmitしたい

### Reactでresetボタンを押すか、送信するときにinput要素内をリセットしたい
Form要素の部分にbuttonを新たに作成しresetボタンを押すとinputの中身がリセットされるようにする。または、inputの内容が送信されると同時に入力した文字がリセットされるようにしたいです。

Form.jsのhandleSubmit関数内でif文の後に、resetする関数を追加してonClickに指定するなどしてみましたが、handleSubmitが働いてリストを追加する処理になってしまいます。

お時間のある方、アドバイスを頂きたいです。

```Appjs
import React, { useState } from 'react';
import Form from './Form';
import List from './List';
import { Title } from './styles';

import shortid from 'shortid';
import { clear } from 'sisteransi';

const App = () => {

  const [todos, setTodos] = useState([
    {
      id: shortid.generate(),
      content: '洗濯をする'
    },
    {
      id: shortid.generate(),
      content: '課題をする'
    },
    {
      id: shortid.generate(),
      content: '御飯を作る'
    }
  ]);

  const addTodo = (content) => {
    const newTodos = [
      ...todos,  //配列に中を展開する
      {
        id: shortid.generate(),
        content
      }
    ]
    setTodos(newTodos)
  };

  //削除
  const deleteTodo = (id) => {
    setTodos(todos.filter(todo => todo.id !== id))
  };

  return (
    <>
      <Title>Todo App</Title>
      <Form
        todos={todos}
        setTodos={setTodos}
        addTodo={addTodo}
        
      ></Form>
      <List todos={todos} deleteTodo={deleteTodo}></List>
    </>
  );
};



export default App;

```

```Formjs
import React, { useState } from 'react';
import { MyForm } from './styles';
import { Input } from './styles';
import { clear } from 'sisteransi';


const Form = ({ todos, setTodos, addTodo }) => {
  const [value, setValue] = useState('');
  console.log(value)
  const handleSubmit = (e) => {
    e.preventDefault()
    if (value) {
      addTodo(value);
    } else {
      alert('文字を入力して下さい');
    };
   
  };


  return (
    <MyForm onSubmit={handleSubmit}>
      <Input
        type="text"
        onChange={e => setValue(e.target.value)}
      />
      <button
      onClick={}
      >Clear</button>
    </MyForm>
  );
};

export default Form;
```