0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

【12日目】React使用しメモアプリを作成1 [monaca]

Last updated at Posted at 2022-05-14

はじめに

今回はReactを使用してメモアプリを作成します。ただReactの知識も乏しいところからスタートするので少しずつの更新になります。今回は少しでも使い方に慣れていくように基本的な操作を練習していきます。

プログラム

今回組んだプログラムは以下の通りです。順を追って説明していきます。

import React from 'react';
import ReactDOM from 'react-dom';
import { Card } from 'react-onsenui';
import { Toolbar, Page, Button } from 'react-onsenui';
import { useState } from 'react/cjs/react.production.min';

import SecondPage from './SecondPage'

let middle;

const handleChange = (e) => {
  console.log(e.target.value);
  middle = e.target.value;
}

const MemoItem = (props) => {
  console.log(props.text);
  return (
    <Card>
      <div>メモの内容:{props.text}</div>
      <div>{props.long}</div>
    </Card>
  );
}

export default class MainPage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      items: [{memo: "hello"},
              {memo: "good bye"},
              {memo: "thank you"}]
    };
  }

  saveMemo() {
    console.log('10');
    alert(middle);
  
  }

  pushPage() {
    this.props.navigator.pushPage({ component: SecondPage });
  }

  renderToolbar() {
    return (
      <Toolbar>
        <div className="center">Navigator</div>
      </Toolbar>
    );
  }

  render() {
    console.log('aaa');
    return (
      <Page renderToolbar={this.renderToolbar}>
        <input onChange={handleChange} type="text"/>
        <Button onClick={this.saveMemo.bind()}></Button>
        
        <p style={{ textAlign: 'center' }}>
          <Button onClick={this.pushPage.bind(this)}>次ページ</Button>
        </p>
        {
          this.state.items.map(item =>
            <MemoItem text={item.memo} long={this.state.items.length} />)
        }
      </Page>
    );
  }
}

ちなみに今回はmonacaのNavigationテンプレートをもとに作成しました。

mapで配列表示

配列を一括で表示する際にはmapを使用します。

this.state = {
      items: [{memo: "hello"},
              {memo: "good bye"},
              {memo: "thank you"}]
    };
 {
   this.state.items.map(item =>
     <MemoItem text={item.memo} long={this.state.items.length} />)
 }

items配列のすべてを表示したいのでmapを使用し、表示として一回ずつMemoItemを呼び出します。

const MemoItem = (props) => {
  console.log(props.text);
  return (
    <Card>
      <div>メモの内容:{props.text}</div>
      <div>{props.long}</div>
    </Card>
  );
}

MemoItemでは引数全体を表すpropsからメモ内容などを受け取り表示させます。Cardを使うとよりそれっぽくなります。
めも2.png

入力

文字の入力には共通してinputを使いますが、入力フォームに何か変化があったときに呼び出されるhandleChangeを使用し、呼び出されるたびに変数middleに文字を入れ込みます。middleは後で配列に追加するために使用します。

<input onChange={handleChange} type="text"/>
let middle;

const handleChange = (e) => {
  console.log(e.target.value);
  middle = e.target.value;
}

配列を追加するためにsaveMemo関数を作ります、今回はmiddleの確認のみ。

saveMemo() {
  alert(middle);
}

めも2あらーと.png


次回からはmiddleからitems配列に追加をする処理やメモ内容をsupabaseに保存されるようにします。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?