Question

我有一个我正在渲染的组件，我使用一些jquery来创建基于已经渲染的div的新输入字段。我仍在学习反应，我得到两个有效但不相等的节点的错误，具有相同的数据重新连接。我知道它，因为我只是将同一个div克隆回dom，但是解决这个问题的基本方法有什么提示吗？一直在寻找钥匙，但不知道如何把它们放到位。提前谢谢。

成分：

var AddNew = React.createClass({
  getInitialState: function() {
    return {name: '', quantity: '', price: ''}
  },
  nameChange: function(e) {
    this.setState({name: e.target.value});
  },
  quantityChange: function(e) {
    this.setState({quantity: e.target.value});
  },
  priceChange: function(e) {
    this.setState({price: e.target.value});
  },
  createNewInput: function(e) {
    e.preventDefault();
    $(".add-new:last").clone().insertAfter("div.add-new:last");
  },
  render: function() {
    return (
      <div>
      <div className="new-section">
        <div className="add-new">
          <ul>
            <li>
              <label>Name</label>
              <input className="add-name" type="text" value={this.state.name} onChange={this.nameChange} />
            </li>
            <li>
              <label>Quantity Available</label>
              <input id="quantity" type="number" value={this.state.quantity} onChange={this.quantityChange} />
            </li>
            <li>
              <label>Price</label>
              <input id="price" type="number" value={this.state.price} onChange={this.priceChange} />
            </li>
          </ul>
        </div>
      </div>
      <button className="add-another" onClick={this.createNewInput}>+ Add another Input</button>
      </div>
    );
  }
});

Answer 1

我建议更多＆＃34;反应＆＃34;方法

而不是使用jquery：

使用数组初始化状态（以存储多组输入项的状态）
渲染数组中的元素
单击SELECT access_id,id,true_if_student_false_if_teacher FROM library_access按钮时，新的空对象Add another set of inputs将添加到数组中并立即呈现，因为每次状态更改时都会调用render方法。

为数组中的每个对象呈现的html输入和其他标记应该包含在一个html元素中，让我们说一个div。如果您将具有唯一值的{name: '', quantity: '', price: ''}属性添加到此div，则可以消除key错误。

但最好显示我想到的代码（你也可以在这里看到它：https://jsbin.com/tinoda/edit?js,console,output）：

data reactid

“两个有效但不相等的节点具有相同的`data-reactid`” - 如何修复

1 个答案: