javascript - 将变量传递到自定义按钮

Question

我有一个如下所示的自定义按钮:

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>

按钮的禁用不起作用，我也可以在不满足这些条件的情况下单击它。我该如何更改？

Answer 1

我只需使用 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>
    )
}