React输入框无法修改？MobX状态管理下的输入框异常问题

看起来你遇到的核心问题是受控输入框的状态联动失效，结合你的代码和MobX Store逻辑，我整理了几个关键修复点：

1. 修正changeData的调用参数 #

你的Store中changeData方法需要接收完整的part对象来提取part.piece，但当前点击行时只传递了row.original.piece（单个值），导致初始值无法正确设置：

// 原代码：传递的是单个piece值
<tr onClick={() => this.props.store.changeData( row.original.piece ) } >

// 修改为：传递完整的part对象
<tr onClick={() => this.props.store.changeData(row.original)} >

2. 修复输入框的onChange事件 #

当前你把事件对象e直接传给了addLego，但方法需要的是输入框的实际值，应该改为e.target.value：

// 原代码：传递事件对象而非输入值
<input onChange={e => this.props.store.addLego("piece",e)} value={this.props.store.piece} />

// 修改为：传递输入框的value
<input 
  onChange={e => this.props.store.addLego("piece", e.target.value)} 
  value={this.props.store.piece} 
/>

3. 修正deletePiece的参数错误 #

SubComponent中row是函数参数，你误用了this.props.row，应该直接使用row.original.id：

// 原代码：错误的上下文引用
<button onClick={() => this.props.store.deletePiece( this.props.row.original.id ) } > Delete </button>

// 修改为：正确使用SubComponent的row参数
<button onClick={() => this.props.store.deletePiece(row.original.id)} > Delete </button>

4. 确保MobX状态可被观测 #

检查你的Store类，确保piece属性被标记为@observable，否则组件无法响应状态变化：

import { observable, action } from "mobx";

class LegoStore {
  // 必须标记为observable，让MobX追踪变化
  @observable piece = "";
  
  changeData = action("change state", part => { 
    this.piece = part.piece; 
  });
  
  addLego = action("addLego", (storeName, value) => { 
    this[storeName] = value; 
  });
  
  // ...其他方法
}

如果没用装饰器，可以在构造函数中用makeObservable声明：

constructor() {
  makeObservable(this, {
    piece: observable,
    changeData: action,
    addLego: action
  });
}

完整修改后的组件代码 #

class ViewLegos extends Component {
  componentDidMount() {
    this.props.store.getAllLegoParts();
  }
  render() {
    const columns = [
      { Header: "Piece", accessor: "piece" }
    ];
    // 解构store简化代码
    const { store } = this.props;
    return (
      <div>
        {store.legoParts.state === "pending" ? (
          <h3>Loading data...</h3> {/* 建议pending状态显示加载提示 */}
        ) : store.legoParts.value.length === 0 ? (
          <h3>No data to display!</h3> {/* 无数据时才显示 */}
        ) : (
          <ReactTable
            defaultPageSize={10}
            className="-striped -highlight"
            data={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={() => store.changeData(row.original)} >
                      <td>
                        <input 
                          onChange={e => store.addLego("piece", e.target.value)} 
                          value={store.piece} 
                        />
                      </td>
                      <td>
                        <button onClick={() => store.updatePiece()}> Update </button>
                        <button onClick={() => store.deletePiece(row.original.id)} > Delete </button>
                      </td>
                    </tr>
                  </tbody>
                </Table>
              );
            }}
          />
        )}
      </div>
    );
  }
}
export default inject("store")(observer(ViewLegos));

额外小建议 #

• 给store.piece设置初始空字符串，避免输入框初始显示undefined；
• 如果updatePiece需要更新当前行数据，建议把row.original.id也传进去，比如store.updatePiece(row.original.id)，确保能定位到要更新的条目；
• 优化状态判断：pending状态应该显示加载提示，无数据的提示留给请求完成但返回空数组的场景。

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