reactjs - 扩展组件样式组件不会使 onClick 发出

Question

预期行为

当我单击扩展从另一个样式组件导入的样式的按钮时提交表单。

问题

虽然扩展组件应用样式来装饰更多样式，但该组件并不能很好地onClick工作。

class User_Edit_Form extends Component {
  
    return (
      <>
        <FormArea>
          
        //   Omitted    //

          <TextLiTag>
            <SubmitButton
              btn_type="submit"
              btn_click={this.handleSubmit}
              btn_disable={!info.username || !info.email || message.username || message.email}
            >Submit
            </SubmitButton>
          </TextLiTag>
        </FormArea>
      </>
    );
  }
}

并且SubmitButton来自这个组件。

function MiddleButton(props) {
  return (
    <StyledButton
      className={props.className}
      type={props.btn_type}
      onClick={props.btn_click}
      onSubmit={props.btn_submit}
      disabled={props.btn_disable}
    >
      {props.children}
    </StyledButton>
  );
}

export default MiddleButton;

const StyledButton = styled.button`
  height: 45px;
  width: 250px;
  font-size: 1.18em;
  font-weight: 550;
  padding: 2px 3.5px;
  border-radius: 10px;
  outline: none;
`;

export const SubmitButton = styled(StyledButton)`
  display: block;
  margin: 10px auto;
  background: ${(props) => !props.btn_disable ? '#8DD6FF' : '#E0F4FF'};
  color: ${(props) => !props.btn_disable ?  '#466A80' : '#BDCFDA' };
  box-shadow: 4px 3px ${Colors.accent1};

  &:hover:enabled{
    background-color:#A8E0FF;
    transition: all 200ms linear;
  }

  &:active:enabled{
    box-shadow:0px 0px 0px;
    transform: translate(4px, 3px);
  }
`;

这是代码有问题。当我看到props这个组件有什么时Chrome dev tool，它有其他props类似btn_type的。我真的被困在这里了。我尝试了所有我想出并找到的解决方案。

如果你没问题，我希望你教我如何解决这个问题。非常感谢。

标签： reactjsstyled-components