时间戳

首页 > 解决方案 > React：点击任何卡片时显示模式

reactjs - React：点击任何卡片时显示模式

问题描述

我是 React 的新手，并且有几张卡片，单击时应该打开一个模式，但是我不知道<Modal trigger={}>在我的 Modal 组件中写什么才能从 Card 组件中获取卡片。我如何将模态链接到每张卡片，以便卡片的 onClick 出现模态？

主页.js

class Home extends React.Component {
    constructor(props) {
      super(props) 
      this.state = { isEmptyState: true }
    }

    triggerOpenAlertState = () => {
      this.setState({
    ...this.state,
    isEmptyState: false,
    isOpenAlertState: true
      })
    }


  render() {
    return (
      <div>
        <i class="star outline icon big" id="favourites"></i>
        <GoogleAuth />
         <div>
      {this.state.isEmptyState && <Cards openAlert={this.triggerOpenAlertState} />}

      {this.state.isOpenAlertState && <ModalExample />}
    </div>
    </div>
    )
  }
}

模态.js

const ModalExample = () => (
  <Modal trigger={}>
    <Modal.Header>Sign In</Modal.Header>
    <Modal.Content>
        <p>
        You must Sign In before you can add project ideas to your favourites.
        </p>
    </Modal.Content>
  </Modal>
)

export default ModalExample

Cards.js

const Cards = props => {
    return (
    <div class="row">
    <div class="column"><div onClick={props.openAlert} class="header card">Communication app for tenants/landlords</div></div> 
        <div class="column"><div onClick={props.openAlert} class="header card">Code Snippet Manager</div></div>
        <div class="column"><div onClick={props.openAlert} class="header card">Reservation Management System</div></div>
        <div class="column"> <div onClick={props.openAlert} class="header card">Budget Tracker</div></div>
        <div class="column"><div onClick={props.openAlert} class="header card">Caesar Cipher</div></div>
        <div class="column"><div onClick={props.openAlert} class="header card">Tax Calculator</div></div>
        <div class="column"><div onClick={props.openAlert} class="header card">Meme Generator</div></div>
        <div class="column"><div onClick={props.openAlert} class="header card">Virtual Interior Design app</div></div>
        <div class="column"><div onClick={props.openAlert} class="header card">App for the Elderly</div></div>
  </div>

标签： reactjs

解决方案

好的，所以鉴于您的更新，您应该像这样进行：

在您的 Home.js 中添加一个道具“isOpen”，这将是模态的可见状态，如果您需要将卡片对象添加到您的模态，还将对象名称“card”添加到您的 ModalExample 组件（并且您的状态为空目的 {}）。将此道具链接到 isOpenAlertState 和卡片。然后更新您的函数触发打开警报以获取参数并将其保存到状态

  triggerOpenAlertState = (card) => {
    this.setState({
      ...this.state, //this is not needed
     isEmptyState: false,
     isOpenAlertState: true,
     card: card;
    })
  }
...
...render() {
  return (
    <div>
      <i class="star outline icon big" id="favourites"></i>
      <GoogleAuth />
       <div>
    {this.state.isEmptyState && <Cards openAlert={this.triggerOpenAlertState} />}

     <ModalExample card={this.state.card} isOpen={this.state.isOpenAlertState}/>
  </div>
  </div>
  )
}

（如果我没记错的话，您不需要在添加组件模式之前进行测试。）

在您的卡片中更新 onclick 操作以将卡片对象提供给该函数：

 <div class="column"><div onClick={() => props.openAlert(clickedCardObject)} class="header card">Code Snippet Manager</div></div>

然后在您的 Modal 组件中获取道具 isOpen 和 card 并根据需要将其链接到您的触发器中：

  const ModalExample = ({isOpen, card}) => (
    <Modal trigger={isOpen}>
   // do Something with card values
  ...

这应该可以链接您的元素。不要忘记关闭模式以将卡片状态设置为 null 并将 isOpenAlertState 设置为 false。

我对您的代码有一些额外的评论/提示，它们通常被称为 js 的“良好实践”。

_首先要增加代码的可读性，您应该使用解构来获取您的变量，即（使用您当前的代码）：

render() {
    const {isOpenAlertState, isEmptyState} = this.state;
    return (
      <div>
        <i class="star outline icon big" id="favourites"></i>
        <GoogleAuth />
         <div>
      {isEmptyState && <Cards openAlert={this.triggerOpenAlertState} />}

      {isOpenAlertState && <ModalExample />}
    </div>
    </div>
    )
  }

这可能看起来不多，但是当您在 state/props 中有很多 var 时，它将大大提高代码的可读性。

_ 其次，您应该在道具/onClick 中使用箭头功能。如果你不这样做，你的函数将在渲染时立即被调用，我怀疑这就是你打算做的，即：

Cards.js

 ...  <div class="column"><div onClick={() => props.openAlert()} class="header card">Code Snippet Manager</div></div> ...

主页.js

... {this.state.isEmptyState && <Cards openAlert={() => this.triggerOpenAlertState()} />} ...

最后，当您调用 setState({}) 时，您不需要（但可以）将 ...this.state 放在首位，因为 setState 会在放入新值或替换旧值之前自动获取旧状态！

希望这可以帮助 ！:D

推荐阅读