どのように私は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

アレイ内の画像を検索する必要はありません。​​に直接渡すことができます。

{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)}/> 

その後、あなたはこの

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 ref="textArea"/> 

full working example