Question

我有一个反应带模式，用于预订会议并存储在sql数据库中。这是模态分量：

import React from 'react';
import { Button, Modal, ModalHeader, ModalBody, ModalFooter, Col, Form, FormGroup, Label, Input, Container,Alert } from 'reactstrap';
import Request from './Request.js'
class Appointment extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      modal: false,
      Date: null,
      description: ""
    };

    this.toggle       = this.toggle.bind(this);
    this.bookMeeting  = this.bookMeeting.bind(this);
    this.handleEvent  = this.handleEvent.bind(this);
  }

  toggle() {
    this.setState(prevState => ({
      modal: !prevState.modal
    }));
  }

  bookMeeting(){
    console.log("subtmit!")
    if(this.state.Date != null && this.state.description != "")
    {
      let date = this.state.Date
      let desc = this.state.description
      const requestBody = {
        date: date,
        description:desc
      }
      const config = {
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
      }
    }
      Request.post("http://localhost:4000/bookAppointment",requestBody,config)
      .then((results) => console.log(results))
      .catch(err => console.log(err))
    }
  }
  handleEvent(event){
    var key = event.target.id
    var val= event.target.value
    console.log([key] + ":" + val)
    this.setState({[key]:val})

  }

  render() {
    return (
      <div>
        <Button color="danger" onClick={this.toggle}>{this.props.buttonLabel}</Button>
        <Modal isOpen={this.state.modal} toggle={this.toggle} className={this.props.className}>
          <ModalHeader toggle={this.toggle}>Set up a meeting</ModalHeader>
          <ModalBody>
            <article> Here you can set up a meeting with your partner. Just provide a date and a time and a small description of the meeting! We'll keep track of it for you and remind you when its coming up!</article>
            <hr/>
            <div>
              <Form>
                <FormGroup>
                  <Label for="Date">Date:</Label>
                  <Input type="Date" id="Date" name="Date"onChange={this.handleEvent}/>
                </FormGroup>
                <FormGroup>
                  <Label for="description">Description:</Label>
                  <Input type="textarea" id="description" name="description"onChange={this.handleEvent}/>
                </FormGroup>
              </Form>
            </div>
          </ModalBody>
          <ModalFooter>
            <Button color="primary" type="button" onClick={this.bookMeeting()}>Book Meeting</Button>
            <Button color="secondary" onClick={this.toggle}>Cancel</Button>
          </ModalFooter>
        </Modal>
      </div>
    );
  }
}

export default Appointment;

每当我更改任何输入字段时，都会调用bookMeeting()。我使用了类似的结构来获取输入并将其发布到我的API的登录和注册页面，并且之前从未遇到过此类问题。即使单击按钮以启动模态，也会调用bookMeeting()函数。

Answer 1

问题出在<Button color="primary" type="button" onClick={this.bookMeeting()}>Book Meeting</Button>行中
您实际上是在这里调用该函数，而不是将其初始化为onClick。只需将此行更改为<Button color="primary" type="button" onClick={this.bookMeeting}>Book Meeting</Button>即可解决此问题。在其他地方，您书写正确。需要完成onClick = {this.bookMeeting}。

每当组件发生更改时，都要对组件调用React函数进行调用

1 个答案: