我有一个如下所示的自定义按钮:
export default function CustomButton(isValid: any, email: any) {
return (
<Button
type="submit"
disabled={!isValid || !email}
style={{
background: '#6c74cc',
borderRadius: 3,
border: 0,
color: 'white',
height: 48,
padding: '0 30px',
}}
>
Remove User</Button>
)
}
目前,我只是将 isValid
和 email
作为变量传递,但对于我使用此按钮组件的所有页面来说,这些变量都会有所不同。如何更改它以便可以传递禁用条件列表
以及其他参数?那么我将如何调用这个组件呢?
其次,现在,当我在主页中像这样使用它时,它可以工作:
{CustomButton(isValid, email)}
但是如果我尝试这样调用它:
<CustomButton isValid email></CustomButton>
按钮的禁用不起作用,我也可以在不满足这些条件的情况下单击它。我该如何更改?
最佳答案
我只需使用 disabled
属性并处理父级中的条件:
const disabled = !isValid || !email;
// example with other conditions:
// const disabled = !isValid || !email ||!username || !password;
//...
<CustomButton disabled={disabled} />
那么该组件可以简单地是:
type ButtonProps = { disabled: boolean };
export default function CustomButton({ disabled }: ButtonProps) { // you also forgot the destructure your props which is why it wasnt working
return (
<Button
type="submit"
disabled={disabled}
style={{
background: '#6c74cc',
borderRadius: 3,
border: 0,
color: 'white',
height: 48,
padding: '0 30px',
}}
>
Remove User</Button>
)
}
关于javascript - 将变量传递到自定义按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60794431/