如何获取新的子元素reactjs

问题描述 投票:0回答:1

我有一个DOM元素的列表,我在render函数中映射。现在,当我单击一个按钮时,我可以添加一个新元素,我有一个正在努力做到这一点的功能。我以这种方式推送列表中的元素:

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。现在,元素的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”,所以我可以更改它的文本,我需要添加一个eventlistener来获取“onChange”,但我不知道如何获取此元素后渲染,当我将它添加到DOM时,我还需要关注它。

显然,当我添加第二个元素时,我可以添加上一个项目。

有些想法?谢谢!

reactjs
1个回答
2
投票

如何重新考虑你的设计,国家将保持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)
   });
}
© www.soinside.com 2019 - 2024. All rights reserved.