ichigoryume programming blog

プログラミングに関する備忘録。主にHTML5, C#, Swiftなど。

React : textareaでEnterかShift + Enterかで処理を分ける

Enterで確定、Shift + Enterで改行みたいにする場合。Enterのみの場合はe.preventDefault()するのがポイント

  render() {
    return (
      <textarea name="msg" cols="40" rows="4" onKeyPress={this.keyPressHandler.bind(this)}/>
      </div>
    )
  }

  keyPressHandler(e) {
    if(e.shiftKey == true) {
      return
    }
    if(e.key != "Enter") {
      return
    }

    console.log(e.target.value)
    e.preventDefault()
  }

React : inputに入力された文字列を取得する

  render() {
    return (
      <input type="text" name="name" size="30" maxlength="20" onKeyPress={this.keyPressHandler.bind(this)}/>
    )
  }

  keyPressHandler(e) {
    console.log(e.target.value)
  }

React : シングルクリックとダブルクリックを排他的に処理するには

  • シングルクリックを拿捕して、その中でタイマーを起こし、タイマー終了時にクリック数を数える。タイマーはクリック数が1(初回)のときのみ起こすようにする。
  constructor(props) {
    super(props)
    this.clickCount = 0
  }

  render() {
    return (
      <div onClick={this.clickHandler.bind(this)}>{this.state.text}</div>
    )
  }

  clickHandler(e) {
    this.clickCount += 1
    if(this.clickCount != 1) {
      return
    }

    setTimeout(() => {
      if(this.clickCount == 1) {
        this.singleClickHandler()
      }
      else if(this.clickCount > 1) {
        this.doubleClickHandler()
      }
      this.clickCount = 0
    }, 200);
  }

React : 子要素を再帰的にrenderするには

render()内のreturn()前で子要素の構造を作り、return()内で使用する。

class Node extends React.Component {
...

  render() {
    var children = []
    for(var child of this.props.model.children) {
      children.push(<Node model={child}/>)
    }
    return (
      <div>
        <div>text:{this.state.text}</div>
        <div>
          {children}
        </div>
      </div>
    )
  }

React : ドラッグ&ドロップを実装するには

ドラッグ対象

  • draggable を true に設定する
  • ドラッグ開始時のイベントハンドラ内で、dataTransfer.setData()をコールしてドラッグ対象要素のidなどをセットしておく
  constructor(props) {
    super(props)
  }

  dragStartHandler(e) {
    console.log("start")
    e.dataTransfer.setData("text", "dummy-id")
  }

  render() {
    return (
      <div draggable="true" onDragStart={this.dragStartHandler.bind(this)} >name:{this.props.name}</div>
    )
  }

ドロップ先

  • dragOverのハンドラ内で必ず preventDefault()をコールする!これを忘れるとdropハンドラがコールされない
  • dropハンドラ内では、dataTransfer.getData()でドラッグ対象要素のidなどを取得して、ドロップ後の処理を実装する。
  constructor(props) {
    super(props)
  }

  dragOverHandler(e) {
    console.log("over")
    e.preventDefault()
  }

  dropHandler(e) {
    console.log("drop")
    var id = e.dataTransfer.getData("text")
    console.log(id)
  }

  render() {
    console.log("render title")
    return (
      <div onDragOver={this.dragOverHandler.bind(this)} onDrop={this.dropHandler.bind(this)}>name:{this.props.title}</div>
    )
  }