Question

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

我是React的新手，最初构建了一个简单的函数，克隆整个div并将其附加到.ticket-section 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>
    );
  }
});

再次感谢。

Answer 1

我不确定，但让我感到高兴，你在找这样的东西吗？

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'));

Fiddle example.我希望它会对你有帮助。

由于

在React中向组件和跟踪状态添加新输入

1 个答案: