Javascript 无法更改输入框中的数据

目标：
当按下其中一个按钮以显示模式时，所选数据（即first和lastname）应添加到输入框中，并且应可编辑。我应该能够编辑数据

问题：
在输入框中添加数据后，无法更改在输入框中添加的数据

为了实现这个目标，需要在源代码中修改什么

Stackblitz:

信息：
*我是个新手

谢谢大家!

import React, { Component } from 'react';
import { render } from 'react-dom';
import './style.css';
import Modal from 'react-modal';

class App extends Component {
  constructor() {
    super();

    this.state = {
      openItem: null,
      items: [
        { firstName: 'Josef', lastName: 'Anderson', key: 'josef.anderson' },
        { firstName: 'Jim', lastName: 'West', key: 'jim.west' },
        { firstName: 'Joe', lastName: 'West', key: 'joe.west' }
      ],
      firstName: '',
      lastName: ''
    };
  }

  handleOpenModal = openItem => {
    this.setState({ openItem });
  };

  handleCloseModal = () => {
    this.setState({ openItem: null });
  };

  render() {
    const { items, openItem } = this.state;

    return (
      <div>
        <table border="1">
          <thead>
            <tr>
              <th>First Name</th>
              <th>Last Name</th>
              <th />
            </tr>
          </thead>
          <tbody>
            {items.map(item => {
              const { firstName, lastName, key } = item;

              return (
                <tr key={key}>
                  <td>{firstName}</td>
                  <td>{lastName}</td>
                  <td>
                    <button onClick={() => this.handleOpenModal(item)}>
                      Open Modal
                    </button>
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
        <div>
          {openItem !== null && (
            <Modal className="confirmation-modal" isOpen={true}>
              First Name:
              <br />
              <input
                type="text"
                id="firstName"
                name="firstName"
                value={openItem.firstName}
              />
              <br />
              <br />
              Last Name: <br />
              <input
                type="text"
                id="lastName"
                name="lastName"
                value={openItem.lastName}
              />
              <button onClick={this.handleCloseModal}>Close Modal</button>
            </Modal>
          )}
        </div>
      </div>
    );
  }
}

render(<App />, document.getElementById('root'));

---

要更改具有状态值的输入的值，应在输入中添加

onChange

prop，以使用如下函数编辑状态值：

handleOpenItemValue = e => {
  let { name, value } = e.target;
  this.setState({ openItem: { ...this.state.openItem, [name]: value } });
}

<input
                type="text"
                id="firstName"
                name="firstName"
                value={openItem.firstName}
                onChange={(e) => this.handleOpenItemValue(e)}
/>

<input
                type="text"
                id="lastName"
                name="lastName"
                value={openItem.lastName}
                onChange={(e) => this.handleOpenItemValue(e)}
/>

handleOpenItemValue=e=>{
设{name，value}=e.target；
this.setState（{openItem:{…this.state.openItem，[name]：value}）；
}
this.handleOpenItemValue（e）}
/>
this.handleOpenItemValue（e）}
/>

我已应用了该代码，但无法使其正常工作。我应该在哪里应用handleOpenItemValue？等一下！我编辑了答案，我忘记了

这个。

在

handleOpenItemValue（e）

handleOpenItemValue = e => {
  let { name, value } = e.target;
  this.setState({ openItem: { ...this.state.openItem, [name]: value } });
}

<input
                type="text"
                id="firstName"
                name="firstName"
                value={openItem.firstName}
                onChange={(e) => this.handleOpenItemValue(e)}
/>

<input
                type="text"
                id="lastName"
                name="lastName"
                value={openItem.lastName}
                onChange={(e) => this.handleOpenItemValue(e)}
/>