点击按钮新增输入组件时，如何处理onChange并存储输入值？

你的核心问题是没有给动态生成的输入框建立与state的对应关系，原代码的state结构和handleChange逻辑无法区分不同输入框的内容，导致无法正确存储值。下面是修正后的完整实现方案：

核心修改点 #

1. 重构state结构，用数组存储每组尺寸-价格数据，每个元素是包含size和price的对象
2. 给每个输入框绑定唯一标识（索引+类型），确保handleChange能精准更新对应数据
3. 实现受控组件，让输入框的值与state实时同步

完整代码实现 #

constructor(props) {
  super(props);
  this.state = {
    productVariants: [], // 存储所有尺寸-价格组，每个元素：{ size: '', price: '' }
  };
}

// 添加新的尺寸-价格输入组
addTextBox = (e) => {
  e.preventDefault();
  // 使用prevState确保状态更新的正确性
  this.setState(prevState => ({
    productVariants: [...prevState.productVariants, { size: '', price: '' }]
  }));
};

// 处理输入框内容变化：接收索引和类型，更新对应位置的state
handleChange = (index, type) => (e) => {
  const { value } = e.target;
  this.setState(prevState => {
    const updatedVariants = [...prevState.productVariants];
    updatedVariants[index][type] = value;
    return { productVariants: updatedVariants };
  });
};

// 提交时获取所有输入数据
onAdd = (e) => {
  e.preventDefault();
  console.log('所有尺寸价格数据:', this.state.productVariants);
  // 这里可添加提交到后端等业务逻辑
};

render() {
  return (
    <div>
      {/* 添加按钮 */}
      <button 
        style={{
          marginLeft:20,
          width:60,
          height:60,
          backgroundColor:'white',
          borderRadius:30,
          color:'dodgerblue',
          display:'flex',
          justifyContent:'center',
          alignItems:'center',
          borderWidth:2,
          borderColor:'dodgerblue',
          cursor:'pointer'
        }} 
        onClick={this.addTextBox}
      >
        <span style={{fontSize:32}}>+</span>
      </button>

      {/* 动态渲染输入组 */}
      {this.state.productVariants.map((variant, index) => (
        <div key={index} className="flex flex-nowrap w-full mt-2">
          <input
            type="text"
            className='form-control mr-2'
            placeholder="输入尺寸（如Small）"
            value={variant.size}
            onChange={this.handleChange(index, 'size')}
          />
          <input
            type="text"
            className='form-control'
            placeholder="输入价格（如100$）"
            value={variant.price}
            onChange={this.handleChange(index, 'price')}
          />
        </div>
      ))}

      {/* 提交按钮 */}
      <span 
        onClick={this.onAdd}
        style={{display:'inline-block', marginTop:10, padding:8, backgroundColor:'dodgerblue', color:'white', borderRadius:4, cursor:'pointer'}}
      >
        确认添加
      </span>
    </div>
  );
}

关键逻辑说明 #

• state结构优化：productVariants数组直接对应每一组输入，每个元素的size和price分别绑定对应输入框，结构清晰易维护
• 受控组件绑定：每个输入框通过value属性与state绑定，确保输入内容实时同步到state
• 精准更新状态：handleChange用柯里化函数传递输入组的索引和类型（尺寸/价格），修改时只更新对应位置的对应字段，避免状态混乱
• 状态更新安全性：使用prevState更新数组，避免直接修改原state导致的不可变问题

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