如何在react中动态设置语义按钮禁用：
<Button disabled>click here<Button>
我试图用 state 设置它，但它给了我一个错误
this.setState({d:'disabled'})
return (<Button {this.state.d} >click here<Button>)
在react中禁用语义按钮
IT技术
reactjs
properties
semantic-ui
semantic-ui-react
2021-05-03 15:45:37
1个回答
不可能知道您的 Button 在后台如何处理 disabled 但假设它像 JSX element 一样工作。
首先，JSX 元素只是带有一组参数（props）的函数。所以你仍然需要给它一个disabled:boolean。正如您在下面看到的，您需要提供一个名称和一个值。您对 {this.state.d} 的尝试仅给出了 true/false 值。请查看下面的代码片段，了解如何执行此操作。要么是显式的，要么是通过给它一个命名变量，或者最后是通过展开一个对象。
class HelloWorldComponent extends React.Component {
constructor(){
super();
this.state = {
disabled: true
}
}
render() {
const disabled = this.state.disabled; //Pull out the value to a named variable
return (
<div>
<button disabled={false}>Button1</button>
<button disabled>Button2</button>
<button {...this.state}>Button3</button>
</div>
);
}
}
React.render(
<HelloWorldComponent/>,
document.getElementById('react_example')
);<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.min.js"></script>
<div id="react_example"></div>