我的Component中有一个按钮,如果接受了项目状态,则应禁用该按钮,否则应附加bootstrap成功类。
我面临的问题是,disabled不是className而不是属性,bootstrap btn btn-success
是className。
如果它只是关于classNames我就像这里一样没有问题
className={items.status === 'declined' ? 'danger' : 'success'}>
但这会导致错误,我目前还不知道如何做到这一点。
{items.status === 'accepted' ? 'disabled' : 'className=btn btn-success'}
我之前也做了一些研究,但这对我没有帮助。 React.js Disable button
有人能指出我在正确的方向吗?如果true
是属性而false
是类名,那么如何编写JSX速记if-else?
提前致谢!
答案 0 :(得分:4)
您应该设置属性className
和disabled
const isAccepted = items.status === 'accepted';
const buttonClasses = isAccepted ? '<some class>' : '<another class>'
<button
className={ buttonClasses }
disabled={ isAccepted }
>
Button
</button>
答案 1 :(得分:0)
class Example extends React.Component {
render() {
const disabled = true
const className = true === 'declined' ? 'danger' : 'success'
return (
<button disabled={disabled} className={className}>
Example
</button>
)
}
}
ReactDOM.render(
<Example />,
document.getElementById('app')
)
&#13;
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app" />
&#13;