React textareaの中にspanタグの文字を入れたい

Question

React textareaの中にspanタグの文字を入れたい

やって見たこと

createElementでタグを作成し、textareaのvalueに入れてみましたがうまく行かず。。

render() {

const ele = React.createElement(
 "span",
 {className: 'hash'},
 "text"
 )
  return(
   <textarea velue={ele}></textarea>
  )
}

結果

## オブジェクト出てきてしまう
=> [object Object]

期待

textareaのvalue中に <span class="hash">text</span>がある
hashクラスには color skyublueが当たっている状態です

Answer 1

textareaはプレーンテキストしか扱えないので、一部だけ色を変えるといったことはできません。
代わりにdivタグなどにcontenteditableという属性を使えば実現できますが、きれいに実装しきるのは難しいです。
一部の色のみを変えたい等であればCodemirrorのようなライブラリを使って実装することをおすすめします。「リッチエディタ ライブラリ」等で検索すれば色々でてくると思います。

Comments

[Awtanabe]

ご回答ありがとうございます！
Twotterのハッシュタグを作りたいなと思ってました。
contenteditableを使えば動的に作れますかね？
#hash と入力があったら色を変換みたいな。

今、contenteditableで調べてやっているのですが、どうやっていこうか試行錯誤中です

[mottox2]

> #hash と入力があったら色を変換みたいな。

昔、CodeMirrorでハッシュタグにハイライトを入れる記事を書いたのでこちらをごらんください。

https://qiita.com/mottox2/items/e21a3244acada977df7f

[Awtanabe]

ありがとうございます！！