Reactでinput部品を扱う

Reactでinput部品を扱う

Reactコンポーネントでinput部品を扱ってみます。

とりあえずレンダリングしてみます。

class DynaForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {val:'入力'};
  }
  render() {
    return (
      <input type="text" value={this.state.val}/>
    )
  }
}
ReactDOM.render(
  <DynaForm />,
  document.getElementById("koko")
)

サンプル

表示はされますが、テキストボックスに値を入力したり変更することができません。

入力値はstateを使用して管理する必要があります。

Reactコンポーネントのステート（状態）を管理する

onChangeイベントを使う

stateはsetStateで変更し、onChangeイベントで変更します。(onchangeではない)

class DynaForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {val:'入力'};
  }
  render() {
    return (
      <input type="text" value={this.state.val} onChange={e=>this.setState({val:e.target.value})} />
    )
  }
}
ReactDOM.render(
  <DynaForm />,
  document.getElementById("koko")
)

サンプル

高橋

KHI入社して退社。今はCONFRAGEで正社員です。関西で140-170/80～120万から受け付けております^^
得意技はJS(ES6),Java,AWSの大体のリソースです
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくは、我に七難八苦を与えたまえ」です^^