Question

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

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

并且它位于this.state.images，我想说onClick这个图像，从图像标签获取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)}/>

然后，你可以用这样的东西将降价附加到textarea

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)}`;
}

此方法使用ref到textarea，别忘了添加它。

<textarea ref="textArea"/>

full working example

我如何将图像源插入文本区域onclick in react

1 个答案: