読者です 読者をやめる 読者になる 読者になる

【React入門】 7 refs概要

JavaScript React 入門

この記事では以下の画面を作成する。

f:id:kosumoro:20160817224232j:plain

ボタンをクリックするとインプットエリアに入力した文字列がアラートで表示される。

https://cosmology233.github.io/sandbox/hatena/2016/08/18/

index.html

こちらと同じ。

kosumemo.hatenablog.com

scripts/script.js

class App extends React.Component {
  constructor() {
    super();
    
    this.onButtonClick = this.onButtonClick.bind(this);
  }
  
  onButtonClick(ev) {
    var input = this.refs.input;
    
    alert(input.value);
  }
  
  render() {
    return (
      <p>
        <input type="text" ref="input" />
        
        <button onClick={this.onButtonClick}>Click!</button>
      </p>
    );
  }
}

ReactDOM.render(
  <App />,
  document.getElementById("app")
);

this.refs.input を使用して、 ref="input" の属性を持つ要素を取得できる。