アウトプットするブログ

Reactでinputのvalueを持ってくる2つの方法

前回に引き続き同じコードでFormタグ内のinputのvalueを取得する2つの方法について解説したいと思ういます。

JSX,REACT,REACT DOMが既に入っているこちらのIDEを使って一緒に進めていくとやりやすいです。 https://jscomplete.com/playground

React.createRef()を使ってref属性で紐付ける

class Form extends React.Component {
  userInput = React.createRef();
  handleSubmit = (event) => {
    event.preventDefault();
    console.log(this.userInput.current.value);
  };
	render() {
  	return (
    	<form onSubmit={this.handleSubmit}>
    	  <input 
          type="text" 
          placeholder="GitHub username"  
          required
          ref={this.userInput}
        />
        <button>Add card</button>
    	</form>
    );
  }
}

class App extends React.Component {
	render() {
  	return (
    	<div>
        <Form />
    	</div>
    );
  }	
}

ReactDOM.render(
	<App />,
  mountNode,
);

まず、userInputという変数にReact.createRef()というAPIを利用するとRefオブジェクトを取得できます。
inputタグ内に定義されたRefは通常コンポーネントのマウント時にインスタンスプロパティーに割り当てられるため、
コンポーネント間の参照が可能となっています。

this.userInputはRefのオブジェクトのため、current内のkeyを参照する必要があります。今回はinputタグの入力した値を取得したいのでvalueがそれにあたります。

このようにお手軽取得ができるRefですが公式ではあまり多用しすぎないようにアナウンスされています。
理由としては、Reactの原則として親コンポーネントから子コンポーネントへ一方向のデータフローを推奨しているため
子コンポーネントにて同じ階層で使用するような値を保持するべきではないことが挙げられます。

ではどのようにして値を保持させるのかみていきましょう。

stateオブジェクトで値を管理する

class Form extends React.Component {
  constructor(props) {
    super(props);
    this.state = {userInput: ''};
  }
  handleSubmit = (event) => {
    event.preventDefault();
    console.log(this.state.userName);
  };
render() {
  	return (
    	<form onSubmit={this.handleSubmit}>
    	  <input 
          type="text" 
          placeholder="GitHub username"  
          required
          value={this.state.userInput}
          onChange={event => this.setState({userInput: event.target.value})}
        />
        <button>Add card</button>
    	</form>
    );
  }
}

class App extends React.Component {
　render() {
  	return (
    	　<div>
        　　<Form />
    	　</div>
    );
  }	
}

ReactDOM.render(
	<App />,
  mountNode,
);

まずCalculatorと呼ばれるコンポーネントを作成し任意のフィールド名を入力して
それらを文字列として初期化します。
次に新しい状態要素をinputタグ内に記入していきます。

value={this.state.userInput}

今回はここが該当します。
これを記入しただけだとReact側が値を制御するようになるため、inputタグ内に文字を入力できません。
そこで変更を検知するためにOnChangeイベントが必要になります。

onChange={event => this.setState({userInput: event.target.value})}

ここで新たにeventというインライン関数を作成して、その中でuserInputの状態を検知し入力した値を変更する必要があります。
そのためにはクラスコンポーネント内で使えるthis.setStateという関数を使用しなければいけません。
関数の中に入れる値はDOMから入力した値を取得したいので、event.target.valueとなります。

これらを実行するとユーザーが直接入力した値にアクセスできるようになります。 onChangeイベントが発生して、要素の状態の変化を認識できるのです。

gif

まとめ

RefでのDOM操作はかなり簡単でjqueryでできるような実装で活躍が期待できそうです。
Stateを用いた方はCalculator内でStateを使うことで親コンポーネントにて管理できる以外にもユーザーの入力を監視できる点
例えばTwitterなどのつぶやきフォームで残文字数を表示するなど、Reactの機能を最大に活かせる実装ができると言えるかと思います。

ブログの投稿ログ

初めてのREACT-v9

Reactでinputのvalueを持ってくる2つの方法

React.createRef()を使ってref属性で紐付ける

stateオブジェクトで値を管理する

まとめ

ブログの投稿ログ

初めてのREACT-v9

# Reactでinputのvalueを持ってくる2つの方法

# React.createRef()を使ってref属性で紐付ける

# stateオブジェクトで値を管理する

# まとめ

Reactでinputのvalueを持ってくる2つの方法

React.createRef()を使ってref属性で紐付ける

stateオブジェクトで値を管理する

まとめ