Reactのinput（arrayのstateを更新し複数inputへ伝播）

https://qiita.com/y_ohr/items/616496f6262951a00d51 の続きです。

環境

Ubuntu 18.04.2 LTS
node v8.10.0
npm 3.5.2
create-react-app v2.1.5

３行まとめ

• array.map()でDOMをレンダリングした
• レンダリングされたinputのonChangeから、stateのarrayを更新するのに苦戦した
• とりあえずUIはできた

arrayのstateを更新し複数inputへ伝播するように修正

diffが多いので、全文掲載。

src/index.js

import React from 'react';
import ReactDOM from 'react-dom';

class Square extends React.Component {
    constructor(props) {
        super(props);
        this.handleChange = this.handleChange.bind(this);
    }

    handleChange(e) {
        this.props.onNumberChange(e.target.value);
    }

    render() {
        return (
            <input
                type="text"
                value={this.props.number}
                className="square"
                onChange={this.handleChange}
            >
            </input>
        );
    }
}

const xyData = [
    { x: 0, y: 1 },
    { x: 3, y: 4 },
    { x: 6, y: 7 },
];

class Board extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            xyData
        };
    }

    renderSquare(i, m) {
        return <Square number={i} onNumberChange={m} />;
    }

    toNumber(n) {
        return n * 1;
    }

    render() {
        const title = 'XY加算機';
        const xyData = this.state.xyData.slice();
        return (
            <div>
                <div className="title">{title}</div>
                {xyData.map((value, i) => (
                    <div className="board-row">
                        {this.renderSquare(value.x,
                            (e) => {
                                xyData[i].x = e;
                                this.setState({ xyData });
                            })
                        }
                        +
                        {this.renderSquare(value.y,
                            (e) => {
                                xyData[i].y = e;
                                this.setState({ xyData });
                            })
                        }
                        =
                        {this.renderSquare(this.toNumber(value.x) + this.toNumber(value.y))}
                    </div>
                ))}
            </div>
        );
    }
}

class Game extends React.Component {
    render() {
        return (
            <div className="game">
                <div className="game-board">
                    <Board />
                </div>
                <div className="game-info">
                    <div>{/* status */}</div>
                    <ol>{/* TODO */}</ol>
                </div>
            </div>
        );
    }
}

// ========================================

ReactDOM.render(
    <Game />,
    document.getElementById('root')
);

感想

• StateのArrayを永続化して、複数クライアントから同時更新すると、当初の目的だった、SPAにおけるDB排他の辺りを調べられそう？
• 長い前段だったけれど、いろいろと、とても勉強になった
• AngularやVueも調べてみたい

以上