チェックボックスの作成

[sumakokima2]

目指す仕様(Earth.tsx内)

• 本件の場合、チェックボックスでPinの表示、非表示を行う
• 適宜チェックボックスのBooleanを＜Pin＞コンポーネントに渡す
• ＜Pin＞には、propsでピンの名前や位置情報などのEarth内Static情報と、チェックボックスのBoolean情報を渡す
• チェックボックスを子コンポーネント化させることも考えたが、上記の理由から同一コンポーネントに書いた方が＜Pin＞との連携が楽

という点から、Earth内に直接書き込むことにする。

prop-typesの導入

prop-typesを入れたらresiumでエラー発生。 https://medium.com/@wlodarczyk_j/handling-multiple-checkboxes-in-react-js-337863fd284e なので、自分で書く。

書いたコード

interface State {
    pinsshow: boolean[];
    imagesshow: boolean[];
  }

 constructor(props: Props){
        super(props);
        this.state = {
            pinsshow: [true,true], 　//ピンの表示非表示Boolean配列
            imagesshow: [true,true]　//画像の表示非表示Boolean配列
          };
    }

render() {　 return (　内

<form id="imagelist1">　//このidは、Googleの検証でcss設定のときに使う
                    <ul>
                        {this.props.pins.map((d, i) => {
                        return (
                            <li>
                                <label>{d.name}</label>
                                <input type="checkbox" 
                                    id={d.id} 
                                    key={d.id}       
                                    checked={this.state.pinsshow[i]}
                                    onClick={this.clickAction} 
                                />
                                {d.name}
                            </li>
                        );
                        })}
                    </ul>
</form>

クリックアクション（class内、render外）

    private clickAction = (e: any) => {
        const target = e.target;
        const value = target.type === 'checkbox' ? target.checked : target.value;
        console.log(this.state.pinsshow[target.id]+"a"+target.checked);　。。。①
        const copy = this.state.pinsshow.slice();
        copy[Number(target.id)] = target.checked;
        this.setState({pinsshow : copy});
        console.log(copy[target.id]+"aa"+this.state.pinsshow[target.id]);　。。。②
    };

＜Pin＞に渡す部分

{this.props.pins.map((d, i) => {
                 return (
                    <Pin name={d.name} id={d.id} show={this.state.pinsshow[i]}/>
                 );
                })}

問題

①では　trueafalse ②では　falseaatrue とBooleanが逆になってしまう。