React.js ライブラリ「react-easy-edit」を使用してインラインでフォームを編集する

create-react-app react-app

## 作成したプロジェクトに移動
cd react-app
 
## インストール
npm install react-easy-edit

import React from 'react'
import EasyEdit from 'react-easy-edit';

const Sample = () => {

  const save = (value) => { alert(value) }
  const cancel = () => { alert("Cancelled") }
  return (
    <div>
      <EasyEdit
        type="text"
        onSave={save}
        onCancel={cancel}
        saveButtonLabel="Save Me"
        cancelButtonLabel="Cancel Me"
        attributes={{ name: "awesome-input", id: 1 }}
        instructions="Star this repo!"
      />
      <EasyEdit
        type="select"
        options={[
          { label: 'First option', value: 'one' },
          { label: 'Second option', value: 'two' }]}
        onSave={save}
        placeholder="My Placeholder"
        instructions="Custom instructions"
      />
      <EasyEdit
        type="checkbox"
        options={[
          { label: 'First option', value: 'one' },
          { label: 'Second option', value: 'two' }]}
        onSave={save}
        value={['one', 'two']} // this will preselect both options
      />
      <EasyEdit
        type="radio"
        value="one"
        onSave={save}
        options={[
          { label: 'First option', value: 'one' },
          { label: 'Second option', value: 'two' }]}
        instructions="Custom instructions"
      />
      <EasyEdit
        type="datalist"
        options={[
          { label: 'First option', value: 'one' },
          { label: 'Second option', value: 'two' }]}
        onSave={save}
        instructions="Custom instructions"
      />
    </div>
  );
}

export default Sample;

import React from 'react';
import Sample from './sample';
import './App.css';

function App() {
  const style = {
    width: "50%",
    margin: "0 auto",
    marginTop: 150,
  };
  return (
    <div className="App">
      <div style={style}>
        <Sample />
      </div>
    </div>
  );
}

export default App;

npm start