禁用語義按鈕的反應

Question

如何動態地設置語義按鈕，在殘疾人反應：

<Button disabled>click here<Button> 

我tryed與狀態設置，但它給了我一個錯誤

this.setState({d:'disabled'}) 
return (<Button {this.state.d} >click here<Button>) 

Answer 1

這是不可能告訴您的Button如何在引擎蓋下處於禁用狀態，但假設它像JSX元素一樣工作。

首先，JSX元素只是接受一組參數（道具）的函數。所以你仍然需要給它一個禁用：布爾值。正如你在下面看到的，你需要提供一個名字和一個值。您在{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>