问题描述
预期行为
当我单击扩展从另一个样式组件导入的样式的按钮时,提交表单。
问题
尽管已将扩展组件应用于样式来装饰更多样式,但是此组件不能使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
的{{1}}时,它具有与Chrome dev tool
类似的其他props
。
我真的被困在这里。我尝试了所有找到的解决方案。
如果您觉得还好,我想请您教我如何解决。 非常感谢。
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)