React中输入框仅能修改单个字符的问题求助

嘿，我帮你分析了代码里的问题，这几个关键点导致了输入框只能输单个字符的情况，咱们一步步来修复：

核心问题分析 #

1. 输入框value绑定不匹配：你现在把输入框的value绑定到了row.original.piece（列表的原始数据），但更新时修改的是MobX store里的piece状态。两者没有关联，所以每次输入后组件重新渲染，输入框又变回原始值，只能保留最后输入的那个字符。
2. addLego函数参数不一致：第一个输入框传的是事件对象e，第二个传的是e.target.value，但store里的addLego写的是this[storeName] = value.target.value——这会导致第二个输入框触发时直接报错（因为value已经是字符串，没有target属性），状态更新完全异常。
3. changeData函数不完整：点击行时只同步了piece字段到store，其他字段（type、startDate、endDate）没同步，编辑这些字段时连初始值都不对。
4. 删除按钮的id获取错误：this.props.row.original.id是错的，row是SubComponent的参数，不是组件props。

具体修复步骤 #

1. 完善MobX Store的changeData函数 #

点击行时，把当前行的所有字段同步到store，确保编辑时有正确的初始值：

changeData = action("change state", part => {
  this.piece = part.piece;
  this.type = part.type;
  this.startDate = part.startDate;
  this.endDate = part.endDate;
  // 存下当前编辑项的id，方便后续更新/删除
  this.currentEditingId = part.id;
});

2. 修复addLego函数的参数逻辑 #

统一参数格式，这里推荐明确传值，逻辑更清晰：

// Store里的addLego改成直接接收值
addLego = action("addLego", (storeName, value) => {
  this[storeName] = value;
});

然后所有输入框的onChange都传e.target.value：

// 比如第一个输入框的onChange改成：
onChange={e => this.props.store.addLego("piece", e.target.value)}

3. 修正输入框的value绑定 #

把输入框的value绑定到MobX store对应的状态，实现双向绑定：

// 第一个输入框
<input 
  type="text" 
  onChange={e => this.props.store.addLego("piece", e.target.value)} 
  name="piece" 
  value={this.props.store.piece} 
/>

// 第二个输入框（去掉错误的placeholder，绑定store的type）
<input 
  type="text" 
  onChange={e => this.props.store.addLego("type", e.target.value)} 
  value={this.props.store.type} 
/>

// 日期组件同理绑定store的对应状态
<Datetime 
  date="date" 
  onChange={e => this.props.store.addLego("startDate", e)} 
  value={this.props.store.startDate}
/>

<Datetime 
  type="date" 
  onChange={e => this.props.store.addLego("endDate", e)} 
  value={this.props.store.endDate}
/>

4. 修复删除按钮的id获取 #

把this.props.row.original.id改成row.original.id：

<button onClick={() => this.props.store.deletePiece(row.original.id) } > Delete </button>

5. 确保MobX状态可观察、组件可响应 #

• 你的Store里的piece、type等字段必须标记为可观察，否则MobX追踪不到状态变化：

import { makeObservable, observable, action } from "mobx";

class LegoStore {
  piece = "";
  type = "";
  startDate = null;
  endDate = null;
  currentEditingId = null;
  legoParts = { state: "pending", value: [] };

  constructor() {
    makeObservable(this, {
      piece: observable,
      type: observable,
      startDate: observable,
      endDate: observable,
      currentEditingId: observable,
      legoParts: observable,
      changeData: action,
      addLego: action,
      getAllLegoParts: action,
      updatePiece: action,
      deletePiece: action
    });
  }

  // 其他方法...
}

• 你的ViewLegos组件必须用observer装饰，这样状态变化时组件才会自动重新渲染：

import { observer } from "mobx-react";

@observer
class ViewLegos extends Component {
  // 组件内容...
}

额外提示 #

当你点击不同行时，changeData会更新store的状态，输入框会自动切换到当前行的数据。另外，你的updatePiece函数可以用store里的currentEditingId和piece、type等状态来找到对应的条目并更新列表。

内容的提问来源于stack exchange，提问作者Nespony