![在反应中禁用语义按钮]( "在反应中禁用语义按钮")
本文介绍了在反应中禁用语义按钮的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
如何在react中动态设置语义Button禁用:
点击这里
我试图用状态设置它，但它给了我一个错误
this.setState({d:'disabled'})return (<Button {this.state.d} >点击这里<Button>)
解决方案
假设它像 JSX 元素一样工作，我们无法判断您的 Button 如何在后台处理禁用.
首先，JSX 元素只是带有一组参数(props)的函数.所以你仍然需要给它一个disabled:boolean.正如您在下面看到的，您需要提供一个名称和一个值.您对 {this.state.d} 的尝试仅给出了 true/false 值.请查看下面的代码片段，了解如何执行此操作.要么显式，要么通过给它一个命名变量，或者最后通过展开一个对象.
class HelloWorldComponent extends React.Component {构造函数(){极好的();this.state = {禁用:真}}使成为() {const disabled = this.state.disabled;//将值拉出到一个命名变量返回 (<div><button disabled={false}>Button1</button><禁用按钮>Button2</button><button {...this.state}>Button3</button>
);}}反应.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>
how to dynamically set semantic Button to disabled in react:
<Button disabled>click here<Button>
i tryed to set it with state but it gave me an error
this.setState({d:'disabled'})
return (<Button {this.state.d} >click here<Button>)
解决方案
It's impossible to tell how your Button is handling disabled under the hood but assuming it´s working like the JSX element .
First, JSX elements are just functions that takes a set of arguments (props). So you still need to give it a disabled:boolean. As you can see below you need to provide a name and a value. Your attempt at {this.state.d} gives just the value true/false. Please look at the snippet below for how you can do it. Either explicit or by giving it a named variable or finally by spreading out an object.
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>
这篇关于在反应中禁用语义按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！