Reactのイベントが発火しない

Question

問題点

onClickイベントでinputのvalueを取得し、stateを更新したいが、onClickイベントが発火しない

実際のコード

export default class SeartchInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      textValue: 'ini'
    };
  }

  changeText(e) {
    console.log('called')
    console.log(this.state.textValue)
    this.setState({textValue: this.refs.inputText.value})
    this.refs.inputText.value = ''
  }

  render() {
    return (
      <Wrapper>
        <Flex justify="center">
          <Input  width="150px"
                  height="25px"
                  placeholder="キーワード検索..."
                  type="text"
                  ref="inputText" />
        {this.state.textValue}
          <SearchBtn  type="submit"
                      onClick={() => this.changeText()} />
        </Flex>
      </Wrapper>
    )
  }
}

試したこと

とりあえずイベントが発火しているか試すために、

onClick={() => alert('clicked')}

なども試しましたが、動いていませんでした。
また、input内でonChengeを試しましたが、そちらも発火しませんでした。

import styled, { css } from "styled-components";
import React from 'react'

import { BtnIcon } from '../Atoms/Icon.js.jsx'
import { Text } from '../Utils/Text.js'
import { Flex } from '../Utils/Flex.js'

import Color from '../const/Color.js'
import Size from '../const/Size.js'

export class SearchBtn extends React.Component {
  render () {
    return (
      <Wrapper>
        <Flex hs="100%" align="center" justify="center">
          <BtnIcon url="SEARCH" type />
        </Flex>
      </Wrapper>
    )
  }
}
...略...

const Wrapper = styled.div`
  height: 14px
  width: 30px;
  padding: 5px;
  background-color: ${ Color.MAIN };
  border: 1px solid ${ Color.MAIN_SHADOW };
  cursor: pointer;
  border-radius: 4px;
  border-bottom: 3px solid ${ Color.MAIN_SHADOW };

  &:active {
    transform: translateY(2px);
    border-bottom: 1px solid ${ Color.SUB1 };
  }
`
...略...

Answer 1

こんにちは

以下のように、constructor の中で this.changeText = this.changeText.bind(this); を追加してみるといかがでしょうか？

修正前：

constructor(props) {
    super(props);
    this.state = {
      textValue: 'ini'
    };
}

修正後：

constructor(props) {
    super(props);
    this.state = {
      textValue: 'ini'
    };

    this.changeText = this.changeText.bind(this);  // この行を追加
}

追記

ご質問に追記いただきました SearchBtn を拝読しましたが、SeartchInput 側で

<SearchBtn  
  type="submit"
  onClick={() => this.changeText()}
/>

として渡している２つの props 、 type と onClick が、 SearchBtn で使われていないようです。渡された onClickを使っていなければ、ボタンをクリックしても何も起きないです。

理解の確認のために、これらの props を受け取って反映させる簡単なボタン SimpleBtn を作るとすれば、例えば以下のようになるかと思います。(※state不要なコンポーネントなので、Functional Component として書くべきところですが、説明のため、Class Component で書きます）

SimpleBtn.jsx

import React from 'react'

class SimpleBtn extends React.Component {
  render() {
    const { type, onClick } = this.props;
    return (
      <button type={type} onClick={onClick}>
        検索
      </button>
    );
  }
}

export default SimpleBtn;

上記のような SimpleBtn を作って SeartchInput の中で SearchBtn の替わりに、

<SimpleBtn  
  type="button"
  onClick={() => this.changeText()}
/>

とすれば、SimpleBtn がrender されたことによる [検索] ボタンをクリックすれば、SeartchInput から onClick として渡した、 changeText が呼ばれると思います。

上記の SimpleBtn で onClick に設定されたイベントハンドラが呼ばれることを確認した後、SearchBtn でも同様に、 onClick を this.props から取得して、それを、しかるべきコンポーネント、（詳しくいえば、Wrapper, Flex, BtnIcon のいずれか）に渡すようにすればよいかと思います。

注意すべきことはSeartchInput から渡された onClick が、子コンポーネントに引き継がれていって、最終的には、どこかの HTML要素がクリックされたときのハンドラに設定されることになっているか、という点を点検するとよいかと思います。

Comments

[susiyaki]

こんにちは

回答有り難うございます。
そちらも試してみたのですが、イベント発火しませんでした。

[jun68ykt]

なるほどです。それでは SearchBtn のソースコードも、ご質問のほうに追記いただけますでしょうか？

[susiyaki]

追記しました。
よろしくおねがいします

[jun68ykt]

ありがとうございます。
回答のほうに追記しました。ご一読頂きさらなる不明点あればまたコメントからお知らせください。

[susiyaki]

ありがとうございます！
onClickはpropsと別物だと考えていたため動くと勘違いしていました...
propsで受け継いで、bindした関数を呼び出すという感じなのですね。

また、stateのありなし関係なくすべてFunctional Componentを使わず書いていたので、そこも変更していこうと思います

[jun68ykt]

どういたしまして。解決されたようで、よかったです ????