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

Question

我想在单击按钮（加号）时附加一个新输入（新节点）。我通过appendChild(input) 实现了这一点。新输入出现在屏幕上，我可以在 Developer Tools > Elements 中看到它，但 React 看不到它。

Developer Tools > Elements

Developer Tools > 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 树并影响协调过程。这将导致 react 组件的完全重新渲染，并将显着影响性能。

相反，我会使用状态变量 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。