javascript - 只能更改 Reactjs 输入中的一个字母吗？

Question

我在 Reactjs 中有一个看起来像这样的类:

 class ViewLegos extends Component {
  componentDidMount() {
    this.props.store.getAllLegoParts();
  }

  render() {
    const columns = [
      {
        Header: "Piece",
        accessor: "piece"
      },
      {
        Header: "Type",
        accessor: "type"
      }
    ];
    return (
      <div>
        {this.props.store.legoParts.state === "pending" ? (
          <h3>No data to display!</h3>
        ) : (
          <ReactTable
            defaultPageSize={10}
            className="-striped -highlight"
            data={this.props.store.legoParts.value}
            columns={columns}
            SubComponent={row => {
              console.log(row);
              return (
                <Table striped bordered condensed hover>
                  <thead>
                    <tr>
                      <th>Name</th>
                      <th>Type</th>
                      <th>Start Date</th>
                      <th>End Date</th>
                      <th>Change it up!</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr onClick={this.props.store.changeData(row.original)}>
                      <td>
                        <input
                          type="text"
                          onChange={e => this.props.store.addLego("piece", e)}
                          name="piece"
                          value={row.original.piece}
                        />
                      </td>
                      <td>
                        <input
                          type="text"
                          onChange={e =>
                            this.props.store.addLego("type", e.target.value)
                          }
                          placeholder={this.props.store.type}
                        />
                      </td>
                      <td>
                        <Datetime
                          date="date"
                          onChange={e =>
                            this.props.store.addLego("startDate", e)
                          }
                        />
                      </td>
                      <td>
                        <Datetime
                          type="date"
                          onChange={e => this.props.store.addLego("endDate", e)}
                        />
                      </td>
                      <td>
                        <button
                          onClick={() =>
                            this.props.store.updatePiece(row.original)
                          }
                        >
                          Update
                        </button>
                        <button
                          onClick={() =>
                            this.props.store.deletePiece(
                              this.props.row.original.id
                            )
                          }
                        >
                          Delete
                        </button>
                      </td>
                    </tr>
                  </tbody>
                </Table>
              );
            }}
          />
        )}
      </div>
    );
  }
}

单击一行时调用的 changeData 函数位于 MobX 存储中，如下所示:

changeData = action("change state", part => {
    this.piece = part.piece;
  });

当输入字段中的值发生变化时，此功能将在 Mobx 存储中启用:

 addLego = action("addLego", (storeName, value) => {
    this[storeName] = value.target.value;
  });

我希望能够更新输入字段中的值。但是目前我只能更改一个字母!每次我输入更多的字母时，一个字母就会变成新的字母。感谢您的帮助!

Answer 1

您在渲染时立即调用 changeData 函数。为 onClick 提供一个函数:

<tr onClick={() => this.props.store.changeData(row.original)}>