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

【问题标题】：React component calling submit function whenever component changes每当组件更改时，React 组件调用提交函数
【发布时间】：2019-07-18 19:59:12
【问题描述】：

我有一个 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() 函数。

【问题讨论】：

标签： javascript reactjs bootstrap-modal reactstrap

【解决方案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} 需要完成。

【讨论】：