Question

我在Reactjs中有一个表格，如下所示：

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

  render() {
    const columns = [
      {
        Header: "Piece",
        accessor: "piece"
      }
    ];
    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 => {
              return (
                <Table striped bordered condensed hover>
                  <thead>
                    <tr>
                      <th>Name</th>
                      <th>Change</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr
                      onClick={() =>
                        this.props.store.changeData(
                          row.original.piece
                        )
                      }
                    >
                      <td>
                        <input
                          onChange={e => this.props.store.addLego("piece",e)}
                          value={this.props.store.piece}
                        />
                      </td>
                      <td>
                        <button onClick={() => this.props.store.updatePiece()}>
                          Update
                        </button>
                        <button
                          onClick={() =>
                            this.props.store.deletePiece(
                              this.props.row.original.id
                            )
                          }
                        >
                          Delete
                        </button>
                      </td>
                    </tr>
                  </tbody>
                </Table>
              );
            }}
          />
        )}
      </div>
    );
  }
}

export default inject("store")(observer(ViewLegos));
I want to change the data in the table row. So when the row is clicked it is going to this function in a Mobx store:

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

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

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

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

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

我希望能够改变输入值的值。但是，当我尝试输入输入字段时，我无法做到！谢谢你的帮助！

Answer 1

e是event，而不是输入的值。值为event.target.value。更改addLego方法应该修复它。

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

无法改变Reactjs中的输入字段？

1 个答案: