###前提・実現したいこと
Reactについて、inputで入力した数だけ画像をループさせる方法がわかりません。
解決策や原因をご存知の方がいらっしゃれば、教えていただけないでしょうか。
よろしくお願いいたします。
###発生している問題
React勉強中の初心者です。
inputでカラム数を入力したら、プレビューにカラム数ぶんの画像が繰り返し出力されるようにしたいのですが、うまくできません。
カラム数にどの数字を入力をしても画像が1つしか出てこず、繰り返しがうまくいっていないのだと考えています。
renderメソッド内やJSX内に書いてみましたが結果は同じでした。
コンポーネントのライフサイクルの問題もあるかと思い調べていますが、なかなか解決できないでいます。
コンパイラやブラウザの開発ツールでエラーはでていません。
###該当のソースコード
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>React Calculate Padding</title> 8</head> 9<body> 10 <div id="app"></div> 11 <script src="dist/bundle.js"></script> 12</body> 13</html>
Javascript
1import React from 'react'; 2import { render } from 'react-dom'; 3 4class App extends React.Component { 5 6 constructor() { 7 super(); 8 this.state = { 9 baseWidthValue: 1000, 10 columnValue: 0, 11 paddingValue: 20, 12 }; 13 } 14 15 onChangebaseWidth(e) { 16 this.setState({ baseWidthValue: e.taget.value }); 17 } 18 19 onChangeColumn(e) { 20 this.setState({ columnValue: [e.target.value] }); 21 } 22 23 onChangePadding(e) { 24 this.setState({ paddingValue: e.target.value }); 25 } 26 27 previewElement() { 28 const list = []; 29 const column = this.state.columnValue; 30 31 const inputPadding = this.state.paddingValue; 32 const totalPadding = (this.state.columnValue - 1) * inputPadding; 33 const padding = totalPadding / this.state.columnValue; 34 const paddingVal = padding / (this.state.columnValue - 1); 35 const elemPadding = padding - (paddingVal * 1); 36 37 for (let i = 0; i < column.length; i++) { 38 list.push( 39 <div 40 className='preview-element' 41 key='columnValue' 42 > 43 <img src="img/box.gif" width={100} height={100} /> 44 <p className='text1'> 45 {'左:' + (Math.floor((padding - elemPadding) * this.state.baseWidthValue) / this.state.baseWidthValue) + 'px'} 46 </p> 47 <p className='text2'> 48 {'右:' + (Math.floor(elemPadding * this.state.baseWidthValue) / this.state.baseWidthValue) + 'px'} 49 </p> 50 </div> 51 ); 52 } 53 return list; 54 } 55 56 render() { 57 return ( 58 <div> 59 <div> 60 <h1>カラム間のpadding余白計算</h1> 61 <form> 62 <p> 63 <label htmlFor='baseWidth'>親要素の横幅:</label> 64 <input type='text' className='baseWidth' value={this.state.baseWidthValue} onChange={this.onChangebaseWidth.bind(this)} />px 65 </p> 66 <p> 67 <label htmlFor='column'>カラム数:</label> 68 <input type='number' className='column' value={this.state.columnValue} onChange={this.onChangeColumn.bind(this)} /> 69 </p> 70 <p> 71 <label htmlFor='padding'>カラム間の余白:</label> 72 <input type='number' className='padding' value={this.state.paddingValue} onChange={this.onChangePadding.bind(this)} />px 73 </p> 74 </form> 75 </div> 76 77 <div> 78 <h2>プレビュー</h2> 79 <div> 80 {this.previewElement()} 81 </div> 82 </div> 83 </div> 84 ); 85 } 86 87} 88 89render( 90 <App />, 91 document.getElementById('app') 92);
回答1件
あなたの回答
tips
プレビュー