Reactで文字列の編集フォーム作成

May 6, 2020 • ☕️ 2 min read

情報を探しても意外に出てこなかったので、Reactで以下のような編集フォームを作成するためのメモ。

まず、create-react-appで雛形アプリを作成。

npx create-react-app edit-form
cd edit-form
yarn start

App.jsの中身は以下のように空っぽにしておく。

これで作業の準備は整った。

それでは、本題の編集フォームを入れる＜EditForm /＞というコンポーネントを作成してみる。

（src／EditForm.js）

import React, { Component } from "react"

export default class EditForm extends Component {
  constructor(props) {
    super(props)
    this.state = {
      input: "",
      editing: true,
    }
    this.handleEditing = this.handleEditing.bind(this)
    this.handleSubmit = this.handleSubmit.bind(this)
  }
  render() {
    const { editing } = this.state
    return (
      <div>
        <h1>EditForm</h1>
        <form>
          {editing ? (
            <div>
              <input
                onChange={(e) => {
                  this.setState({ input: e.target.value })
                }}
                type="text"
                value={this.state.input}
              />

              <button onClick={this.handleSubmit}>Save</button>
            </div>
          ) : (
            <div>
              <span>{this.state.input}</span>
              <button onClick={this.handleEditing}>Edit</button>
            </div>
          )}
        </form>
      </div>
    )
  }

  handleEditing(e) {
    e.preventDefault()
    this.setState({
      editing: !this.state.editing,
    })
  }

  handleSubmit(e) {
    e.preventDefault()
    if (!this.state.input) return
    this.setState({
      input: this.state.input,
      editing: !this.state.editing,
    })
  }
}

あまり難しいことはしていない。

editingというstateを用意し、trueの時は文字列とEditボタンでfalseの時は入力フォームとSaveボタンが表示されるよう以下のような三項演算子を使用した。

{editing ? (
            <div>
              （trueの時の表示）
            </div>
          ) : (
            <div>
              （falseの時の表示）
            </div>
          )

そして、EditボタンやSaveボタンの押した時のonClickで以下のようにtrue/falseを切り替えている。

this.setState({ editing: !this.state.editing })

フォームの中身は、以下のようにしてonChangeが発火するたびに表示が切り替わるようになっている。

<input
  onChange={(e) => {
    this.setState({ input: e.target.value })
  }}
  type="text"
  value={this.state.input}
/>

あとはフォームのvalueとして値が変更されたinputというstateが、SaveボタンのonClickで実行されるhandleSubmit( )で更新されればOK。

handleSubmit(e) {
    e.preventDefault()
    if (!this.state.input) return
    this.setState({
      input: this.state.input, // ここでinputの値を更新して
      editing: !this.state.editing, // 同時にeditingをfalseに
    })
  }

作成した＜EditForm /＞を忘れずに＜App /＞でimportしておく。

（src／App.js）

import React from "react"

import EditForm from "./EditForm"

function App() {
  return (
    <div className="App">
      <EditForm />
    </div>
  )
}

export default App

これで、Reactで文字列の編集ができるようになった。

おわり。

Tomoya

Relative Posts:

【React】Edit form for a static string

May 6, 2020

【Gatsby.js】爆速でポートフォリオを作成する方法

May 5, 2020

To output what I learn from things, and brush up both English & Japanese writing skills. 日々感じたことや学んだことを日本語と英語でアウトプットするための技術系ブログ