4

如何在反应中动态地将语义按钮设置为禁用:

<Button disabled>click here<Button>

我试图用状态设置它,但它给了我一个错误

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

1 回答 1

3

无法判断您的 Button 是如何在后台处理禁用的,但假设它像 JSX element 一样工作。

首先,JSX 元素只是接受一组参数(props)的函数。所以你仍然需要给它一个 disabled:boolean。正如您在下面看到的,您需要提供名称和值。您对 {this.state.d} 的尝试只给出了真/假值。请查看下面的代码段,了解如何执行此操作。要么是显式的,要么是通过给它一个命名变量,或者最后通过扩展一个对象。

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>

于 2017-05-07T21:34:00.593 回答