React Native中TextInput文本变更与onEndEditing功能失效问题求助

• TextInput未绑定value属性与onChangeText回调，属于非受控组件写法，用户输入的新数量无法同步到业务数据层
• onEndEditing绑定的AddItemHandler仅实现数量+1逻辑，完全没有读取用户手动输入的数值，因此编辑结束后无法同步修改结果

1. 为CartItem组件添加本地state存储临时输入的数量，同时新增输入变化、编辑结束的处理逻辑，以及props更新时的状态同步逻辑
2. 修改TextInput的绑定属性，关联状态与处理方法
3. （可选）建议父组件新增onUpdateQuantity方法支持直接设置指定数量，避免多次调用加减接口的性能问题

首先是CartItem类的新增逻辑：

export class CartItem extends React.PureComponent {
  // 新增本地state存储输入的数量
  state = {
    inputQuantity: this.props.item.quantity.toString()
  };

  // 新增props变化时同步输入框状态的逻辑
  componentDidUpdate(prevProps) {
    if (prevProps.item.quantity !== this.props.item.quantity) {
      this.setState({ inputQuantity: this.props.item.quantity.toString() });
    }
  }

  // 新增输入变化处理逻辑，仅允许输入数字
  handleQuantityChange = (text) => {
    const pureNumText = text.replace(/[^0-9]/g, '');
    this.setState({ inputQuantity: pureNumText });
  };

  // 新增编辑结束处理逻辑，校验输入值后同步到购物车
  handleEndEditing = async () => {
    const { item, onUpdateQuantity } = this.props; // 需父组件传入onUpdateQuantity方法
    const newQuantity = parseInt(this.state.inputQuantity, 10);

    // 输入值校验，非法值自动回退到原有数量
    if (isNaN(newQuantity) || newQuantity < 1) {
      this.setState({ inputQuantity: item.quantity.toString() });
      return;
    }

    // 数值无变化则不触发更新
    if (newQuantity === item.quantity) return;

    // 调用父组件方法更新数量
    await onUpdateQuantity(newQuantity);
  };

  render() {
    // 原有render逻辑保留
    const { item, onAdd, onDes, onRemove } = this.props;
    // ... 原有其他逻辑不变

然后是需要修改的TextInput代码段：

<View>
  <TextInput
    keyboardType='numeric'
    value={this.state.inputQuantity}
    onChangeText={this.handleQuantityChange}
    onEndEditing={this.handleEndEditing}
    style={styles.boxText}
  />
</View>

最后是propTypes的新增配置：

CartItem.propTypes = {
  item: PropTypes.object.isRequired,
  onAdd: PropTypes.func.isRequired,
  onRemove: PropTypes.func.isRequired,
  onDes: PropTypes.func.isRequired,
  onUpdateQuantity: PropTypes.func.isRequired // 新增prop校验
};

如果暂时不想修改父组件新增onUpdateQuantity方法，可以在handleEndEditing中通过差值计算调用原有加减方法实现更新，示例如下：

handleEndEditing = async () => {
  const { item, onAdd, onDes } = this.props;
  const newQuantity = parseInt(this.state.inputQuantity, 10);
  if (isNaN(newQuantity) || newQuantity < 1) {
    this.setState({ inputQuantity: item.quantity.toString() });
    return;
  }
  const diff = newQuantity - item.quantity;
  if (diff === 0) return;
  // 循环调用加减方法
  for (let i = 0; i < Math.abs(diff); i++) {
    diff > 0 ? await onAdd() : await onDes();
  }
};

内容的提问来源于stack exchange，提问作者Konnect Holdings LLC