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组件的上下文中执行。

在传递函数的其他地方也应牢记这一点。

表单处于ReactStrap Modal设置状态

1 个答案: