Не можете изменить поле ввода в Reactjs?

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;
});