时间戳

首页 > 解决方案 > 使用 reactjs 禁用或激活按钮

reactjs - 使用 reactjs 禁用或激活按钮

问题描述

在我的应用程序中有两个组件，称为 Employee 和 EmplyeeButtonGroup。

 export default class Employee extends Component {
       render() {
        return (

         <h1>Permanent</h1>
         <EmplyeeButtonGroup />
         <EmplyeeButtonGroup />

         <h1>Temporary</h1>
         <EmplyeeButtonGroup />
         <EmplyeeButtonGroup />

)}
}


export default class EmplyeeButtonGroup extends Component {
 render() {
        return (
          <Button>Add</Button>
          <Button>Delete</Button>
          <Button>Send</Button>

)}
}

在<h1>Temporary</h1>此标题下，我想禁用删除和添加按钮。我可以通过为临时员工和永久员工创建两个组件来做到这一点。但我正在寻找另一种方式。我如何使用反应来做到这一点？

提前致谢。

标签： reactjs

解决方案

class Employee extends React.Component {

  //...

  render() {
    return (
      <React.Fragment>
        <h1>Permanent</h1>
        {/* Just add whatever buttons want to enable as a prop */}
        <EmplyeeButtonGroup add delete send />

        <h1>Temporary</h1>
        <EmplyeeButtonGroup send />
      </React.Fragment>
    );
  }
}

class EmplyeeButtonGroup extends React.Component {

  //...

  render() {
    return (
      <React.Fragment>
        <button disabled={!this.props.add}>
          Add
        </button>
        <button disabled={!this.props.delete}>
          Delete
        </button>
        <button disabled={!this.props.send}>
          Send
        </button>
      </React.Fragment>
    );
  }
}


function App() {
  return (
    <div className="App">
      <Employee />
    </div>
  )
}

ReactDOM.render(<App /> , document.getElementById('root'))
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root"></div>

推荐阅读