我如何在react中的onclick文本区域中插入图像源

Question

所以我有一个图像对象，看起来像：

[{
  image_src: 'some/src',
  name: 'some name'
},{ ... }]

并且它存在于this.state.images ，我想对这个图像说onClick，从image标签获取name属性，在图像数组中搜索具有相同名称的对象，然后在文本区域中光标位置，将该图像添加为markdown： ![name](image_src)

我的图像显示为：

<img src={img.image_src} onClick={this.addImageToTextArea.bind(this)} data-name={img.name} />

我有函数： addImageToTextArea(){ }但是我不确定下一步该怎么做。

救命？

Answer 1

不必搜索数组中的图像，您可以将其直接传递给addImageToTextArea() 。

{this.state.images.map((image) =>
   <img className="image" src={image.image_src}
    onClick={this.addImageToTextArea.bind(this,image)} data-name={image.name} />)}

要么

<img className="image"
  src={image.image_src} onClick={() => this.addImageToTextArea(image)}/>

然后，您可以使用以下内容将markdown附加到文本区域

addImageToTextArea(img){
     let stringImage = `![${img.name}](${img.image_src})`;
     let {textArea} = this.refs;
     let value = textArea.value;
     let position = textArea.selectionStart;
     textArea.value = `${value.substr(0,position)}${stringImage}${value.substr(position)}`;
}

此方法使用对文本区域的引用，不要忘记添加它。

<textarea ref="textArea"/>

完整的工作示例