Question

我正在遍历表tds，底部一行的每个单元格都是带有... Read More链接的业务描述，该链接可打开模式。当我单击一个单元格时，它不仅打开了该单元格的模态，还打开了所有单元格，并且从最后一个单元格开始非常奇怪。请观看此视频以获取演示：

代码如下：

  state = {
    showModal: false
  };

  toggleModal = () => {
    this.setState({showModal: true});
    console.log('showModal: ', this.state.showModal);
  }

并且：

  <tr style={{height: '132px'}}>
    {assignedServiceProviders.map((provider, index) => {
      return (
        <td key={index}>
          <Truncate lines={5} ellipsis={<span>... <a onClick={this.toggleModal} key={index}>Read more</a></span>}>
            {provider.description} asfasfdadfdas 46465464 adaddafafdadf 4654564564564 adsadfdafafdfd
          </Truncate>
          <If condition={this.state.showModal}>
            <AutomaticModalTrigger modal={businessDescriptionModal(provider.description)} key={index}>
              <span style={{ display: 'none' }} />
            </AutomaticModalTrigger>
          </If>
        </td>);
    })}
  </tr>

当我单击链接时，只需要打开相应的业务描述，而无需打开任何其他业务描述！有谁知道如何防止这种行为？

Answer 1

问题在于，当遍历 assignedServiceProviders 时，您正在创建模态的多个实例。我认为您不需要多个实例，因为您一次只能打开一个实例。

将模态的状态设置为 showModal 时。您实际上是在生成的模态的所有实例上设置状态。因此，您最终会打开多个模态。理想情况下，您应该只使用一种模态并将数据传递给模态。

您可以这样做：

首先，将模态移出循环，以使它只有一个实例。

将数据传递给：

 <a>onClick={() => this.toggleModal(provider.description)} key={index}>Read more</a>

最后，在toggleModal函数中，首先设置说明，然后打开模式。

这样，您的所有 ReadMore 链接都将最终调用同一模式实例。但是有不同的描述。设置描述后，您可以使用现有的 showModal 状态重新呈现组件。

这是一个小例子：

class App extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      showModal: false,
      description: ''
    }
    this.list = [{description: 'desc1'}, {description: 'desc2'}];
  }

  onAnchorClick({description},event){
    this.setState({description, showModal: true});
  }

  render(){
    return(
      <div>
        {this.list.map((obj, idx) => <div key={idx}>
          <a onClick={this.onAnchorClick.bind(this, obj)}>Read More</a>
        </div>)}

        <div style={{display: !this.state.showModal ? 'none' : 'block'}}>
          <h3>Description: {this.state.description}</h3>
        </div>
      </div>
    )
  }
}

window.onload = () => {
    ReactDOM.render(<App />, document.getElementById("app"));
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="app"></div>

如何防止在React中一次调用多个循环输出？

1 个答案: