javascript - React 16 Hidden button Modal 不会在点击时打开

Question

我创建了一个隐藏按钮，可以通过单击任何列表项来启用它。我已将 showModal 函数附加到确认按钮的 onClick 上。当我单击确认按钮时，它应该打开 Modal，相反，没有任何反应。控制台中没有错误。 这里缺少什么？

import React from "react";
import {
  Form,
  FormGroup,
  Row,
  FormControl,
  Col,
  Button,
  Label,
  Modal,
  ButtonToolbar,
  Table
} from "react-bootstrap";

const MorningDrinks = [
  {
    id: "1",
    name: "Tea",
    cost: 15
  },
  {
    id: "2",
    name: "Coffee",
    cost: 15
  },
  {
    id: "3",
    name: "Milk",
    cost: 15
  }
];

const ChoclateDrinks = [
  {
    id: "4",
    name: "Smoothie",
    cost: 15
  },
  {
    id: "5",
    name: "Hot Chocolate",
    cost: 15
  }
];

class MenuCard extends React.Component {
  // constructor(props) {
  //  super(props);
  state = {
    selectedItems: []
  };

  // this.selectItem = this.selectItem.bind(this);
  //this.showModal = this.showModal.bind(this);
  //this.hideModal = this.hideModal.bind(this);
  //}

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

  selectItem = item => {
    const { counter, selectedItems } = this.state;
    const newItem = {
      ...item,
      quantity: 1
    };

    const el = selectedItems.filter(el => el.id === newItem.id);

    if (selectedItems.length === 0) {
      this.setState({
        selectedItems: selectedItems.concat([newItem])
      });
    } else {
      if (el.length) {
        const newSelectedItems = selectedItems.map(item => {
          if (item.id === newItem.id) {
            item.quantity++;
          }

          return item;
        });

        this.setState({
          selectedItems: newSelectedItems
        });
      } else {
        this.setState({
          selectedItems: selectedItems.concat([newItem])
        });
      }
    }
  };

  deleteItem = i => {
    this.setState({
      selectedItems: this.state.selectedItems.filter((item, index) => {
        return index !== i;
      })
    });
  }

  render() {
    const { counter, selectedItems } = this.state;
    return (
      <div className="container">
        <p>Welcome {this.props.name}! Pick your any Break-fast menu you want</p>
        <Row>
          <Col xs={3}>
            <ul>
              <h2>Morning Drinks </h2>

              {MorningDrinks.map((item, i) => (
                <li
                  style={{ cursor: "pointer" }}
                  key={i}
                  onClick={() => this.selectItem(item)}
                >
                  {item.name} {item.cost}
                </li>
              ))}
            </ul>
            <ul>
              <h2>Chocolate Drinks </h2>
              {ChoclateDrinks.map((item, i) => (
                <li
                  style={{ cursor: "pointer" }}
                  key={i}
                  onClick={() => this.selectItem(item)}
                >
                  {item.name} {item.cost}
                </li>
              ))}
            </ul>
          </Col>

          <Col xs={3}>
            <ul>
              <h2>Your orders </h2>

              {selectedItems.map((item, i) => (
                <li key={i}>
                  {item.name} {item.cost} {item.quantity}
                  <span onClick={() => this.deleteItem(i)}>cancel</span>
                </li>
              ))}
            </ul>

            {this.state.selectedItems.length > 0 ? (
              <ButtonToolbar>
                <Button type="button" style={{ display: "block" }} onClick={this.showModal}>
                  Confrim
              </Button>
                <Modal
                  {...this.props}
                  show={this.state.show}
                  onHide={this.hideModal}
                  dialogClassName="custom-modal"
                >
                  <Modal.Header closeButton>
                    <Modal.Title
                      id="contained-modal-title-lg "
                      className="text-center"
                    >
                      Add Expenses
              </Modal.Title>
                  </Modal.Header>
                  <Modal.Body>
                    <h4>Wrapped Text</h4>
                    <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                    <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                    <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                    <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                    <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                    <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                    <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                    <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                    <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                  </Modal.Body>
                </Modal>
              </ButtonToolbar>
            ) : (
                <Button type="button" style={{ display: "none" }}>
                  Confrim
              </Button>
              )}

          </Col>

          <Col xs={3}>
            <ul>
              <h3>Total</h3>

              {selectedItems.reduce(
                (acc, item) => acc + item.cost * item.quantity,
                0
              )}
            </ul>
          </Col>
        </Row>
      </div>
    );
  }
}

export default MenuCard;

Answer 1

随着 <Modal />移出条件渲染。

import React from "react";
import {
  Form,
  FormGroup,
  Row,
  FormControl,
  Col,
  Button,
  Label,
  Modal,
  ButtonToolbar,
  Table
} from "react-bootstrap";

const MorningDrinks = [
  {
    id: "1",
    name: "Tea",
    cost: 15
  },
  {
    id: "2",
    name: "Coffee",
    cost: 15
  },
  {
    id: "3",
    name: "Milk",
    cost: 15
  }
];

const ChoclateDrinks = [
  {
    id: "4",
    name: "Smoothie",
    cost: 15
  },
  {
    id: "5",
    name: "Hot Chocolate",
    cost: 15
  }
];

export class MenuCard extends React.Component {
  state = {
    selectedItems: [],
    show: false
  };

  showModal = () => {
    this.setState({ show: true });
  }

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

  selectItem = item => {
    const { counter, selectedItems } = this.state;
    const newItem = {
      ...item,
      quantity: 1
    };

    const el = selectedItems.filter(el => el.id === newItem.id);

    if (selectedItems.length === 0) {
      this.setState({
        selectedItems: selectedItems.concat([newItem])
      });
    } else {
      if (el.length) {
        const newSelectedItems = selectedItems.map(item => {
          if (item.id === newItem.id) {
            item.quantity++;
          }

          return item;
        });

        this.setState({
          selectedItems: newSelectedItems
        });
      } else {
        this.setState({
          selectedItems: selectedItems.concat([newItem])
        });
      }
    }
  };

  deleteItem = i => {
    this.setState({
      selectedItems: this.state.selectedItems.filter((item, index) => {
        return index !== i;
      })
    });
  }

  render() {
    const { counter, selectedItems } = this.state;
    return (
      <div className="container">
        <p>Welcome {this.props.name}! Pick your any Break-fast menu you want</p>
        <Row>
          <Col xs={3}>
            <ul>
              <h2>Morning Drinks </h2>

              {MorningDrinks.map((item, i) => (
                <li
                  style={{ cursor: "pointer" }}
                  key={i}
                  onClick={() => this.selectItem(item)}
                >
                  {item.name} {item.cost}
                </li>
              ))}
            </ul>
            <ul>
              <h2>Chocolate Drinks </h2>
              {ChoclateDrinks.map((item, i) => (
                <li
                  style={{ cursor: "pointer" }}
                  key={i}
                  onClick={() => this.selectItem(item)}
                >
                  {item.name} {item.cost}
                </li>
              ))}
            </ul>
          </Col>

          <Col xs={3}>
            <ul>
              <h2>Your orders </h2>

              {selectedItems.map((item, i) => (
                <li key={i}>
                  {item.name} {item.cost} {item.quantity}
                  <span onClick={() => this.deleteItem(i)}>cancel</span>
                </li>
              ))}
            </ul>

            {this.state.selectedItems.length > 0 ? (
              <ButtonToolbar>
                <Button type="button" style={{ display: "block" }} onClick={this.showModal}>
                  Confrim
              </Button>
              </ButtonToolbar>
            ) : (
                <Button type="button" style={{ display: "none" }}>
                  Confrim
              </Button>
              )}

          </Col>

          <Col xs={3}>
            <ul>
              <h3>Total</h3>

              {selectedItems.reduce(
                (acc, item) => acc + item.cost * item.quantity,
                0
              )}
            </ul>
          </Col>
        </Row>

              <Modal
                show={this.state.show}
                onHide={this.hideModal}
                dialogClassName="custom-modal"
              >
                <Modal.Header closeButton>
                  <Modal.Title
                    id="contained-modal-title-lg "
                    className="text-center"
                  >
                    Add Expenses
            </Modal.Title>
                </Modal.Header>
                <Modal.Body>
                  <h4>Wrapped Text</h4>
                  <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                  <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                  <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                  <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                  <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                  <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                  <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                  <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                  <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                </Modal.Body>
              </Modal>
      </div>
    );
  }
}

export default MenuCard;