Question

我想在点击按钮（加号）时附加一个新输入（新节点）。我是通过appendChild(input)实现的。屏幕上会显示新输入，我可以在 Developer Tools＆gt;中看到它。元素，但 React看不到。

onClickPlus(event) {
   event.preventDefault();
   let button = event.currentTarget;
   let input = button.previousSibling.cloneNode(true);
   let name = input.getAttribute("name").split(".");
   let newName = name[0] + '.' + (Number(name[1]) + 1);
   input.setAttribute("name", newName);
   let parent = button.parentNode;
   parent.appendChild(input);
   parent.appendChild(button);
}

如何正确实施？

Answer 1

我会避免“手动”操纵DOM，因为它会更改DOM树并影响对帐过程。这将导致反应组分的完全重新渲染，并将显着影响性能。

相反，我会使用状态变量ej。点击方法会在点击时更新“可见”。

onClickPlus(event) {
   event.preventDefault();
   this.setState({visible: true})
}

如果您需要在用户单击+按钮时渲染多个输入实例，最好的方法是在该状态下拥有此实例的数组。

constructor(props){
     super(props)
     this.state = {
        inputElements: []
     }
}

onClickPlus(event) {
   event.preventDefault();
   this.setState({
    inputElements: this.state.inputElement.concat(newElementId)
   })
}

在渲染时迭代inputElement数组。通过这种方式，您还可以使用 - 按钮来消除输入字段。

对于具有全局状态redux-form的动态反应形式，强烈建议使用FieldArray。

如何在React中追加新元素（新节点）？

1 个答案: