Question

每次单击图像时，都会调用 changeAlertVisibility 。

然后将状态的 alertVisible 属性更改为true。

然后在render方法内部，如果 alertVisible 值为true，则应该呈现Alert（对话框），否则为空。

import React, { Component } from "react";
import Alert from "./Alert";

class ListItem extends Component {
  state = {
    alertVisible: false
  };

  changeAlertVisibility = () => {
    this.setState(prevState => ({
      alertVisible: !prevState.alertVisible
    }));
  };

  render() {
    return (
        <div className="card__body">
          <img
            src={this.props.photo.urls.small}
            onClick={() => this.changeAlertVisibility()}
          />

        {this.state.alertVisible ? (
          <Alert
            photoDesc={this.props.photo.description}
            photoPath={this.props.photo.urls.small}
            photoAlt={this.props.photo.id}
          />
        ) : (
          <></>
        )}
      </div>
    );
  }
}

export default ListItem;

它有效，但仅需每秒单击一次。

我第一次单击图像， alertVisible 的值更改为true，然后弹出警报。

但是第二次， alertVisible 的值更改为false并且没有弹出警报。

第三次再次起作用，依此类推。

如何更改每次单击警报弹出的代码？

Answer 1

问题在于此代码将alertAlertVisible转换为其先前状态的倒数：

  changeAlertVisibility = () => {
    this.setState(prevState => ({
      alertVisible: !prevState.alertVisible
    }));
  };

因此，最初this.state.alertVisible是false。第一次单击后，它将设置为!this.state.alertVisible // => true。第二次单击时，将其重新设置为!this.state.alertVisible // => false。

为了实现所需的功能，您需要始终将alertVisible设置为true，如下所示：

  changeAlertVisibility = () => {
    this.setState({ alertVisible: true });
  };

现在，您可能希望在用户关闭警报时将其设置回false。由于看不到您的Alert组件的定义，因此我无法告诉您确切的实现方法。但是，我会向您的onClose添加一个Alert回调，当警报关闭时会调用该回调，然后在此处将alertVisible设置为false：

import React, { Component } from "react";
import Alert from "./Alert";

class ListItem extends Component {
  state = {
    alertVisible: false
  };

  changeAlertVisibility = (visible) => {
    this.setState({ alertVisible: visible });
  };

  render() {
    return (
        <div className="card__body">
          <img
            src={this.props.photo.urls.small}
            onClick={() => this.changeAlertVisibility(true)}
          />

        {this.state.alertVisible ? (
          <Alert
            photoDesc={this.props.photo.description}
            photoPath={this.props.photo.urls.small}
            photoAlt={this.props.photo.id}
            onClose={() => this.changeAlertVisibility(false)}
          />
        ) : (
          null
        )}
      </div>
    );
  }
}

export default ListItem;

反应-每次单击图像时显示警报

1 个答案: