Question

我有一个包含DOM元素的列表，我在渲染功能中映射。现在，当我单击一个按钮时，我可以添加一个新元素，并且我有一个正在起作用的函数。我以这种方式将元素推入列表中：

this.state.addedText.push(
    <div className="editable" id={idDiv} onChange={(e) => this._changeText(e)} contentEditable style={{display: "block", position: "absolute", fontWeight: "bold", backgroundColor: "rgba(0,0,0,.5)", wordWrap: "break-word", textAlign: "center", width: "100%", color: "white", top: "0px", borderTop: "1px solid white", borderBottom: "1px solid white"}}>
       {this.state.textDivAdded[nextItem]}
    </div>
 );

，然后调用 forceUpdate 。现在，element的id类似于“ editable_＃”，其中＃是数组中的位置（所以诸如editable_1，editable_2等。）。

如果在forceUpdate下面放置了console.log(document.getElementsByClassName("editable"))，我可以看到新元素，但是我看不到它。如果我写console.log(document.getElementsByClassName("editable"))[0]，则表示“ 未定义”。

这是我呈现列表的方式：

{this.state.addedText.length > 0 && this.state.addedText.map(v => {
  return (
      <Draggable defaultPosition={{x: 0, y: 0}} enableUserSelectHack={false} axis="both" bounds="parent">
         {v}
      </Draggable>
  )
})}

您可以看到我添加的div是“ contentEditable ”，因此我可以更改其文本，并且需要添加一个事件监听器来获取“ onChange”，但是我不知道不知道如何在渲染后获得该元素，而且在将其添加到DOM时也需要将其聚焦。

很可能，当我添加第二个元素时，我可以添加上一个元素。

有什么主意吗？谢谢！

Answer 1

如何重新考虑您的设计，该状态将保留div的值：

this.state = {
   texts: [];
}

...

{this.state.texts.length && this.state.texts.map((v,i) => {
  return (
      <Draggable key={i} ...>
         <div className="editable" onChange={(e) => this._changeText(i,e)} contentEditable ...>
          {v}
         </div>
      </Draggable>
  )
})}

要添加文本：

this.setState({
   texts: [...this.state.texts, 'whatever, coming from an array?']
});

更改文本：

_changeText(i,e) {
   this.setState({
      texts: this.state.texts.map((t,j), => i == j ? e.target.value : t)
   });
}

如何获取新的子元素reactjs

1 个答案: