Question

所以我有这些组件可以呈现一个＆＃39;个别项目＆＃39;它有3个输入字段。我在组件的底部创建了一个按钮，可以在单击时复制并添加单个项目。我需要一些帮助来渲染前两个输入而没有点击另一个按钮的最终价格输入。我在组件底部有一个className='add-donation'按钮。在React中这样做的最佳方法是什么？

我一直在努力为某个价格领域创建一个组件但是没有运气让它发挥作用。我还玩弄了每个声明，检查每个价格输入的条件，看看价格是多少。如果是0.00则隐藏。显然，这样我会遇到一些问题并且不想这样做。

var AddItem = React.createClass({
  getInitialState: function() {
    return {elements: [{name: '', quantity: '', price: ''}]};
  },
  nameChange: function(index, e) {
    var elements = this.state.elements;
    elements[index].name = e.target.value;
    this.setState({elements: elements});
  },
  quantityChange: function(index, e) {
    var elements = this.state.elements;
    elements[index].quantity = e.target.value;
    this.setState({elements: elements});
  },
  priceChange: function(index, e) {
    var elements = this.state.elements;
    elements[index].price = e.target.value;
    this.setState({elements: elements});
  },
  createNewItem: function(e) {
    var elements = this.state.elements;
    elements.push({name: '', quantity: '', price: ''});
    this.setState({elements: elements});
  },
  deleteItem: function(e) {
    var elements = this.state.elements;
    elements.pop({name: '', quantity: '', price: ''});
    this.setState({elements:elements});
  },
  render: function() {
    return (
        <div className="item-section">
          {this.state.elements.map((element, index) =>
          <div className="individual-item" key={index}>
            <ul>
              <li>
                <label>Ticket Name</label>
                <input className="ticket-name" type="text" value={element.name} onChange={this.nameChange.bind(this, index)} />
              </li>
              <li>
                <label>Quantity Available</label>
                <input className="quantity" type="number" placeholder="100" value={element.quantity} onChange={this.quantityChange.bind(this, index)} />
              </li>
              <li>
                <label>Price</label>
                <input className="price" type="number" placeholder="25.00" value={element.price} onChange={this.priceChange.bind(this, index)} />
              </li>
              <li>
                <button type="button" className="delete-item" onClick={this.deleteTicket}><i className="fa fa-trash-o delete-item"></i></button>
              </li>
            </ul>
          </div>
          )}
          <button type="button" className="add-another-item" onClick={this.createNewItem}>+ Add another ticket</button>
          <button type="button" className="add-donation" onClick={this.createDonation}>+ Add donation</button>
        </div>
    );
  }
});

Answer 1

当您通过单击按钮添加新项目时，添加一个支持，说明您是否要显示额外的输入字段。

<button onClick={() => this.createNewItem({ type: 'donation' }) }>+ Add donation</button>

然后在你的函数中：

createNewItem: function(options) {
  var elements = this.state.elements;
  elements.push({name: '', quantity: '', price: '', type: options.type});
  this.setState({elements: elements});
}

然后在渲染功能中，如果类型不是donation：

，则仅显示输入字段

render: function() {
  return (
    <div className="item-section">
      {this.state.elements.map((element, index) =>
      <div className="individual-item" key={index}>
        <ul>
          <li>...name...</li>
          <li>...quantity...</li>

          { element.type !== 'donation' &&
          <li>...price...</li>
          }

          ... 

        </ul>
      </div>
      )}

      ...buttons..  

    </div>
  )
}

单击时复制两个输入元素但忽略单个元素

1 个答案: