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

只能在Reactjs的输入中更改一个字母？

1 个答案: