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

Posted 2023-02-22

【中文标题】如何在 React 中添加新元素（新节点）？

【英文标题】：How can I append a new element (new node) in React?

【发布时间】：2018-01-28 04:03:15

【问题描述】：

我想在单击按钮（加号）时附加一个新输入（新节点）。我通过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);

我怎样才能正确地实现这个？

【问题讨论】：

使用状态！ facebook.github.io/react-native/docs/state.html

React 不是 jquery！

@Maxwelll 谢谢

【参考方案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。

【讨论】：

非常感谢！但我认为你不能使用'push'，mb'concat'？

是的。 Push 不会返回一个新数组，但 concat 会。好点子！