Question

我想将div附加到当前的div中，它具有多个div，但每个div在下拉列表中都有其唯一项。

根据其他答案和教程，我设法解决了这个问题，但是重复的div具有与原始div相同的值，并且值随着原始div的变化而变化。

我有什么办法使它的价值与上面的值不同？我也希望将来可以对其进行排序

谢谢！

沙盒，获取完整代码 https://codesandbox.io/s/stoic-mestorf-k997d

渲染部分的代码

    render() {
      return (
      <div>
        <h2>Sales Order</h2>
        {this.state.items.map((item, index) => (
          <span key={index}>
        <div>
           {/*dropdownlist for available items*/}
           <select
            name="sel"
            value={this.state.selecteditems}
            onChange={this.handleSelect(index)}
          >
          {this.state.data.map(item => 
            <option key={item.productID} value={item.unitPrice}>
              {item.itemName}
            </option>
          )}
          </select>

          {/*unit price*/}
          <p>Unit Price: RM {this.state.selecteditems} </p>

          {/*button to add quantity*/}
          {this.state.selecteditems.length ? (
            <button onClick={this.addPro}> + </button>
          ) : null }

          {/*textbox for quantity*/}
          {this.state.selecteditems.length ? (
            <input type="text" ref="quan" placeholder="Quantity" 
              value={this.state.quantity}
              onChange={(e) => 
                this.setState({quantity: e.target.value})}
              >
              </input>
          ) : null }

          {/*button to decrease quantity}*/}
          {this.state.selecteditems.length ? (
            <button onClick={this.decPro}> - </button>
          ) : null }

          {/*subtotal*/}
          {this.state.selecteditems.length ? (
            <p>Sub Total: RM {this.state.subtot} </p>
          ) : null }

          {/*button to remove all ements*/}
          <button onClick={this.handleDelete(index)}>X</button>
        </div>
        <br/><br/>
        </span>
        ))}
          <button onClick={this.addElements} >Add</button>

      </div>
    )  
  }

用于添加div的代码

    addElements = e => {
      e.preventDefault()
      let items = this.state.items.concat([''])
      this.setState({
          items,
      })
    }

Answer 1

很抱歉，我的问题中的单词选择不多，我基本上想要的只是添加另一个下拉列表，其默认值来自API的同一数据列表。

所以我所做的基本上是创建一个新组件并将其附加到当前组件中

import {NewComponent} from './components/NewComponent';

class App extends React.Component {
 constructor()
 {
  super();
  this.state = {
    children: []
  };
 }

   appendChild() {
     this.setState({
       children: [
         ...this.state.children, <NewComponent/>
       ]
     });
   }

    render() {
      return (
      <div>
       <button onClick={() => this.appendChild()}>Append Child</button>
        <div>
         {this.state.children.map(child => child)}
        </div>
      </div>

感谢所有尝试帮助我的人，希望这对以后能遇到此问题的人有所帮助。

ReactJS根据按钮onClick将div附加到现有div

1 个答案: