每当组件更改时，React 组件调用提交函数

Question

我有一个 react-strap 模式，用于预订存储在 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 组件调用提交函数

React component calling submit function whenever component changes

javascript

bootstrap-modal

reactjs

reactstrap