React - onChange在输入时无法正常工作

Question

我有一个记录表，其中包含＆＃39;编辑＆＃39;并且＆＃39;删除＆＃39;每个按钮。点击＆＃39;编辑＆＃39;记录上的按钮显示模式，其中包含来自本地状态的预填充输入字段。我已经将onChange处理程序添加到输入（作为props传递）但是当尝试更改输入中的文本时，它只在控制台日志中添加/删除一个字符（如果与上一个不同）...我很困惑，请帮忙！

截图

Table.js

import React from 'react';
import { Table, Button } from 'reactstrap';

import EditModal from 'components/EditModal';

export default class Table extends React.Component {
  constructor() {
    super();

    this.state = {
      data: [
        {
          fname: 'Mark',
          lname: 'Adams',
          username: '@mdo'
        },
        {
          fname: 'Jacob',
          lname: 'Thornton',
          username: '@thor'
        },
        {
          fname: 'Jenny',
          lname: 'Smith',
          username: '@jsh'
        }
      ],
      modal: false,
      selectedRecord: -1
    };

    this.renderRow = this.renderRow.bind(this);
    this.deleteHandler = this.deleteHandler.bind(this);
    this.editHandler = this.editHandler.bind(this);
    this.toggle = this.toggle.bind(this);
    this.changeHandler = this.changeHandler.bind(this);
  }

  deleteHandler(i) {
    this.setState(prevState => {
      return {
        data: [...prevState.data.slice(0, i), ...prevState.data.slice(i + 1)]
      };
    });
  }

  toggle() {
    this.setState({
      modal: !this.state.modal
    });
  }

  editHandler(i) {
    this.setState({
      selectedRecord: i,
      modal: !this.state.modal
    });
  }

  changeHandler(e) {
    console.log(e.target.value);
  }

  renderRow({ fname, lname, username }, i) {
    return (
      <tr key={i}>
        <th scope="row">{i + 1}</th>
        <td>{fname}</td>
        <td>{lname}</td>
        <td>{username}</td>
        <td>
          <Button outline color="info" onClick={() => this.editHandler(i)}>
            Edit
          </Button>&nbsp;
          <Button outline color="danger" onClick={() => this.deleteHandler(i)}>
            Delete
          </Button>
        </td>
      </tr>
    );
  }

  render() {
    const { selectedRecord, modal } = this.state;

    return (
      <div className="animated fadeIn">
        <Table hover>
          <thead>
            <tr>
              <th>#</th>
              <th>First Name</th>
              <th>Last Name</th>
              <th>Username</th>
              <th>Action</th>
            </tr>
          </thead>
          <tbody>{this.state.data.map(this.renderRow)}</tbody>
        </Table>
        {selectedRecord > -1 && (
          <EditModal
            formData={this.state.data[selectedRecord]}
            modal={modal}
            toggle={this.toggle}
            changeHandler={this.changeHandler}
          />
        )}
      </div>
    );
  }
}

EditModal.js

import React from 'react';
import PropTypes from 'prop-types';

import {
  Button,
  Modal,
  ModalHeader,
  ModalFooter,
  ModalBody,
  Form,
  FormGroup,
  Input,
  Label,
  Col
} from 'reactstrap';

export default class EditModal extends React.Component {
  constructor() {
    super();
  }
  render() {
    const { formData, modal, toggle, changeHandler } = this.props;
    const { fname, lname, username } = formData;

    return (
      <Modal isOpen={modal} toggle={toggle}>
        <ModalHeader>Edit this record</ModalHeader>
        <ModalBody>
          <Form className="mt-5">
            <FormGroup row>
              <Label for="fname" sm={3}>
                First name
              </Label>
              <Col sm={9}>
                <Input
                  type="text"
                  name="fname"
                  value={fname}
                  onChange={changeHandler}
                />
              </Col>
            </FormGroup>
            <FormGroup row>
              <Label for="lname" sm={3}>
                Last name
              </Label>
              <Col sm={9}>
                <Input
                  type="text"
                  name="lname"
                  value={lname}
                  onChange={changeHandler}
                />
              </Col>
            </FormGroup>
            <FormGroup row>
              <Label for="username" sm={3}>
                Username
              </Label>
              <Col sm={9}>
                <Input
                  type="text"
                  name="username"
                  value={username}
                  onChange={changeHandler}
                />
              </Col>
            </FormGroup>
          </Form>
        </ModalBody>
        <ModalFooter>
          <Button color="primary" onClick={() => {}}>
            Save
          </Button>{' '}
          <Button color="secondary" onClick={toggle}>
            Cancel
          </Button>
        </ModalFooter>
      </Modal>
    );
  }
}

EditModal.defaultProps = {
  formData: {},
  modal: false,
  toggle: () => {},
  changeHandler: () => {}
};

EditModal.propTypes = {
  formData: PropTypes.object,
  modal: PropTypes.bool,
  toggle: PropTypes.func,
  changeHandler: PropTypes.func
};