やりたいこと

propsとしてonClick時のアクションをStyledButtonといったパーツのコンポーネントに渡し、クリック時に実行する。

問題点

styled-componentを使用する前まで正常に動いていた、propsで渡されたonClick時のアクションの実行ができなくなった点です。

Form
1class User_Edit_Form extends Component {
2  
3
4 //     省略     //
5
6  render() {
7    const { info, message, imgUrls } = this.state;
8    const setNoImageButton = (name, text) => {
9      return (
10        <StyledButton name={name} onClick={() => this.setNoImage(name)}>
11          {text}
12        </StyledButton>
13      );
14    };
15
16    const setCancelUploadButton = (name, text) => {
17      return (
18        <StyledButton name={name} onClick={() => this.cancelUploadedImage(name)}>
19          {text}
20        </StyledButton>
21      );
22    };
23
24    let deleteIconButton;
25    let deleteBackgroundButton;
26    if (typeof info.icon == 'string') {
27      deleteIconButton = setNoImageButton('icon', 'アイコンを未設定にする');
28    } else {
29      deleteIconButton = setCancelUploadButton('icon', '画像取り消し');
30    }
31
32    if (typeof info.background == 'string') {
33      deleteBackgroundButton = setNoImageButton('background', '背景を未設定にする');
34    } else {
35      deleteBackgroundButton = setCancelUploadButton('background', '画像取り消し');
36    }
37
38    return (
39      <>
40        <FormArea>
41          
42         //    省略　　　//
43
44          <TextLiTag>
45            <SubmitButton
46              btn_type="submit"
47              btn_click={this.handleSubmit}
48              btn_disable={!info.username || !info.email || message.username || message.email}
49            >編集完了
50            </SubmitButton>
51          </TextLiTag>
52        </FormArea>
53      </>
54    );
55  }
56}

Button
1function MiddleButton(props) {
2  return (
3    <StyledButton
4      className={props.className}
5      type={props.btn_type}
6      onClick={props.btn_click}
7      onSubmit={props.btn_submit}
8      disabled={props.btn_disable}
9    >
10      {props.children}
11    </StyledButton>
12  );
13}
14
15export default MiddleButton;
16
17const StyledButton = styled.button`
18  height: 45px;
19  width: 250px;
20  font-size: 1.18em;
21  font-weight: 550;
22  padding: 2px 3.5px;
23  border-radius: 10px;
24  outline: none;
25`;
26
27export const SubmitButton = styled(StyledButton)`
28  display: block;
29  margin: 10px auto;
30  background: ${(props) => !props.btn_disable ? '#8DD6FF' : '#E0F4FF'};
31  color: ${(props) => !props.btn_disable ?  '#466A80' : '#BDCFDA' };
32  box-shadow: 4px 3px ${Colors.accent1};
33
34  &:hover:enabled{
35    background-color:#A8E0FF;
36    transition: all 200ms linear;
37  }
38
39  &:active:enabled{
40    box-shadow:0px 0px 0px;
41    transform: translate(4px, 3px);
42  }
43`;

SubmitButtonというボタンを、StyledButtonのスタイルを流用して作成し(Buttonファイル内)、別のコンポーネントでimportして使っております(Formファイル内)。
props.btn_clickとして、SubmitButtonにthis.handleSubmitを渡しているのですが、クリックしてもbtn_click(onClickイベント)が発火しません。

styled-componentを適用する前は、機能していたのでSubmitButtonに書き換えたことでpropsの受け渡しに何らかの問題が発生したのだと思います。

以前、props.classNameをコンポーネントに付けていなかったことで詰まったことがありましたが、今回のケースとまた異なるもので、解決の糸口が見当たらない現状です。

どなたかお知恵を貸していただきたく存じます。
ご回答何卒よろしくお願い申し上げます。