表單處於ReactStrap Modal設置狀態

Question

我正在嘗試顯示帶有新注釋形式的模式。 我將包含表單的JSX傳遞給模式，輸入的onChange方法將觸發，但不會更新狀態。 我看到該事件通過console.log和name和value的值觸發，但是狀態沒有更新。 任何幫助將不勝感激。

Modal.js

import React from "react";
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from "reactstrap";

export default function MyModal(props) {
  return (
    <Modal isOpen={props.isOpen}>
      <ModalHeader>{props.modalTitle}</ModalHeader>
      <ModalBody>{props.modalBody}</ModalBody>
      <ModalFooter>
        <Button color="primary" onClick={props.modalAction}>
          Yes
        </Button>{" "}
        <Button color="secondary" onClick={props.handleModal}>
          Cancel
        </Button>
      </ModalFooter>
    </Modal>
  );
}

LeadView.js

export class LeadView extends Component {
  constructor() {
    super()
    this.state = {
      result: '',
      message: '',
      note: '',
      modal: false,
      modalTitle: '',
      modalBody: '',
      modalAction: '',
    }
  }
  handleChange = event => {
    console.log('name', event.target.name)
    console.log('value', event.target.value)

    const { name, value } = event.target
    this.setState({
      [name]: value,
    })
  }

  handleModalForNote = () => {
    this.setState({
      modal: !this.state.modal,
      modalTitle: 'New Note',
      modalBody: (
        <div className="form-group">
          <input
            type="text"
            className="form-control"
            onChange={this.handleChange}
            name="note"
            value={this.state.note}
          />
        </div>
      ),
      modalAction: this.handleCallClick,
    })
  }

  render() {
    return (
      <Fragment>
        <MyModal
          handleModal={this.handleModalClose}
          modalAction={this.state.modalAction}
          isOpen={this.state.modal}
          modalBody={this.state.modalBody}
          modalTitle={this.state.modalTitle}
          modalOptions={this.state.modalOptions}
        />
        <button onClick={this.handleModalForNote} className="btn btn-primary">
          Write Note
        </button>
      </Fragment>
    )
  }
}

Answer 1

將函數handleChange提供給輸入時，僅傳遞函數本身。 然后，當您將該JSX提供給Modal時，它的執行思路是，無論它執行的是什么代碼，都應在Modal Component中執行。 您需要做的是同時通過傳遞當前上下文

onChange={this.handleChange .bind(this)}

這會將您組件的“上下文”綁定到該函數，以便現在無論在何處調用它，都將在您的LeadView組件的上下文中執行。

對於傳遞函數的其他地方，也應牢記這一點。