reactjs - 在 react 中禁用语义按钮

Question

如何在 react 中动态设置语义按钮禁用:

<Button disabled>click here<Button>

我试图用 state 设置它，但它给了我一个错误

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

Answer 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>