Javascript 向组件添加新输入并跟踪React中的状态

我有一个React组件，它有几个简单的输入字段，我目前正在跟踪状态，最终将其放入AJAX调用中。我还有一个按钮，单击该按钮，将创建一行新的输入字段（与初始输入相同）

我对React非常陌生，最初构建了一个简单的函数，它克隆了整个div，并将其附加到

.ticket部分

div。我遇到了一些关于输入具有相同React id的问题，我真的觉得我在与框架作斗争

关于如何创建这些新输入并能够单独跟踪新行输入的状态，有何建议？事先非常感谢

以下是我的组件：

var AddItem = React.createClass({
  getInitialState: function() {
    return {item_name: '', quantity: '', price: ''}
  },
  itemNameChange: function(e) {
    this.setState({item_name: e.target.value});
  },
  quantityChange: function(e) {
    this.setState({quantity: e.target.value});
  },
  priceChange: function(e) {
    this.setState({price: e.target.value});
  },
  render: function() {
    return (
      <div>
      <div className="ticket-section">
        <div className="add-ticket">
          <ul>
            <li>
              <label>Name</label>
              <input id="item-name" type="text" placeholder="xyz item" value={this.state.item_name} onChange={this.itemNameChange} />
            </li>
            <li>
              <label>Quantity Available</label>
              <input id="quantity" type="number" placeholder="100" value={this.state.quantity} onChange={this.quantityChange} />
            </li>
            <li>
              <label>Price</label>
              <input id="price" type="number" placeholder="25.00" value={this.state.price} onChange={this.priceChange} />
            </li>
          </ul>
        </div>
      </div>
      <button className="add-another-item">+ Add another item</button>
      </div>
    );
  }
});

var AddItem=React.createClass({
getInitialState:函数（）{
返回{项目名称：''，数量：''，价格：'}
},
itemNameChange:函数（e）{
this.setState（{item_name:e.target.value}）；
},
数量变化：函数（e）{
this.setState（{quantity:e.target.value}）；
},
价格变化：功能（e）{
this.setState（{price:e.target.value}）；
},
render:function（）{
返回(


名称


可用数量


价格


+添加另一项
);
}
});

---

再次感谢。

我不确定，但让我问一下，你在找这样的东西吗

class InputComponent extends React.Component {
  constructor(props){ 
    super(props) 
  }
  render(){
    return <div>
      <input type="text" 
        onChange={this.props.change}/>
     </div>
  }
}

class Widget extends React.Component {
  constructor(){
    this.state = {
      values: ['']
    };
    this.handleClick = this.handleClick.bind(this);
  }
  handleChange(index, e){
    const oldState = this.state.values;
    oldState[index] = e.target.value
    this.setState({values: oldState})
  }

  handleClick(){
    const oldState = this.state.values
    oldState.push('');
    this.setState({values: oldState})
  }
  render(){
    const itemList = this.state.values.map((item, index)=>{
      return  <InputComponent key={index} change={this.handleChange.bind(this, index)}/>
    });
    console.log(this.state.values)
    return <div>
      {itemList}
      <hr/>
      <button onClick={this.handleClick}>Click</button>
    </div>
  }
}

React.render(<Widget />, document.getElementById('container'));

类InputComponent扩展了React.Component{ 构造器（道具）{ 超级（道具） } render（）{ 返回 } } 类小部件扩展了React.Component{ 构造函数（）{ 此.state={ 值：[''] }; this.handleClick=this.handleClick.bind（this）； } 手柄更换（索引，e）{ const oldState=this.state.values； oldState[index]=e.target.value this.setState（{values:oldState}） } handleClick（）{ const oldState=this.state.values oldState.push（“”）； this.setState（{values:oldState}） } render（）{ const itemList=this.state.values.map（（项，索引）=>{ 返回 }); console.log（this.state.values） 返回 {itemList}

---

点击 } } React.render（，document.getElementById（'container'）； 我希望它能帮助你

---

谢谢

谢谢你！不完全是我需要的，但肯定是我可以参考的东西。