代码之家 › 专栏 › 技术社区 › Thanveer Shah

反应:如何仅显示特定div的模式弹出窗口

jsx reactjs javascript

Thanveer Shah · 技术社区 · 7 年前

将有一组产品,一旦你点击该产品,只有该产品及其详细信息将显示在弹出模式。

一旦我点击第一个div的按钮,我希望模态只为第一个div打开。

但现在当我点击按钮时,所有3个模态都会弹出。

还是有更好的方法?与循环和创建3模式弹出窗口类似,我们是否可以只创建一个模式弹出窗口,显示正在单击的按钮的特定div的数据?

App.js,我在这里创建了数组

Js,其中它被映射到3div中,并且还具有模式弹出窗口

如果你们需要更多细节,请告诉我

谢谢你们。

使用数组中的数据以Dunamical方式创建的3个Div

1 回复 | 直到 7 年前

Bayu 7 年前

this.state.showModal . 一旦 true 然后一切都会突然出现。如果你仍然喜欢3个这样的情态动词。我建议你充分利用 showModal

state = {
    showModal: {}
}

那么 getModal() 功能:

getModal = value => {//still using variable from `data.id`
    let key_to_update = {};
    key_to_update[value] = true;
    this.setState( {
        showModal: Object.assign( {}, this.state.showModal, key_to_update )
    } );
}

那么对于 <Modal/>

<Modal show={this.state.showModal[data.id]} onClick={()=> this.hideModal(data.id)}/>

要隐藏模态,可以执行与以下相反的操作 getModal() 详情如下:

hideModal = value => {//still using variable from `data.id`
    let key_to_update = {};
    key_to_update[value] = false;//Just different on this
    this.setState( {
        showModal: Object.assign( {}, this.state.showModal, key_to_update )
    } );
}

data.id 将正确/错误检查作为 showModal

class Product extends Component {
  state = {
    showModal: 0
  };

  getModal = value => {
    this.setState({ showModal: value });
  };

  hideModal = value => {
    this.setState({ showModal: 0 });
  };

  render() {
    return (
      <div className="container">
        {this.props.data.map((data, key) => (
          <div key={key} className="small">
            <p>Namsse: {data.name}</p>

            <button onClick={() => this.getModal(data.id)}>Popup</button>

            <Modal
              show={this.state.showModal === data.id}
              onHide={() => this.hideModal(data.id)}
              name={data.name}
            />
          </div>
        ))}
      </div>
    );
  }
}

工作演示: https://codesandbox.io/s/pkjvy72mw0

<模态/> 元素如下所示:

class Product extends Component {
  state = {
    showModal: false,
    dataModal: {
      name: ""
    }
  };

  getModal = data => {
    this.setState({ showModal: true, dataModal: data });
  };

  hideModal = () => {
    this.setState({ showModal: false });
  };

  render() {
    return (
      <div className="container">
        {this.props.data.map((data, key) => (
          <div key={key} className="small">
            <p>Namsse: {data.name}</p>

            <button onClick={() => this.getModal(data)}>Popup</button>
          </div>
        ))}

        <Modal
          show={this.state.showModal}
          onHide={this.hideModal}
          name={this.state.dataModal.name}
        />
      </div>
    );
  }
}

工作演示: https://codesandbox.io/s/53x7m726xk