リストボックス修正
-----------------------------------
書籍サンプルで、option 選択チェックありを、if 文でフィルタリングしてState値
を更新でいていたけど、わざわざそうしなくても、以下のようにすると同じように
できるので。参考までに掲載しておきます。
------------------------------------------------------------------------------
// リストボックスサンプル
function FormList() {
const [form, setForm] = useState({
animal: ['dog', 'hamster']
});
// リストボックスの変更時に入力値をStateに反映
const handleFormList = e => {
// 選択値を格納する配列
const data = [];
// <option>選択状態にある値を配列に追加
//const opts = e.target.options;
const opts = e.target.selectedOptions;
for (const opt of opts) {
// if (opt.selected) {
data.push(opt.value);
//}
}
// 最終的な結果をStateに反映
setForm({
...form,
[e.target.name]: data
});
};
// 「送信」ボタンクリックで、入力値をログ出力
const show = () => {
console.log(`好きな動物 : ${form.animal}`);
};
return (
<form>
<label htmlFor='animal'>好きな動物 : </label>
<select id='animal' name='animal' value={form.animal} size='4' multiple={true} onChange={handleFormList} >
<option value='dog'>イヌ</option>
<option value='cat'>ネコ</option>
<option value='hamster'>ハムスター</option>
<option value='rabbit'>ウサギ</option>
</select>
<button type='button' onClick={show}>送信</button>
</form>
);
}
export default FormList
「React実践入門」でサンプルにエラーがあったので
修正しておきます。画像は「public/image」index.jsは「src」配下になっているはずです。
-----------------------------------------
import { useState } from 'react';
export default function EventError({ src, alt }) {
const [path, setPath] = useState(src);
const handleError = () => setPath('../image/noimage.jpg');<<< 「.」を「..」にしないと画像は表示しません。
return (
<img src={path} alt={alt} onError={handleError} />
);
}
呼び込む方(indexjs)も
<EventError src="../image/wings.jpg" alt="サンプル画像" />
にして「../」にしてください。
useStateの使い方
---------------------------------
export default function UseStateApp() {
const [count, setCount] = useState(0);
const handleCurrentCount = (num) => {
setCount((prev) => {
//prevには変更前の値が自動で入る
console.log(prev);
return prev + num;
});
}
return (
<>
<div>
{/* 引数を渡したいとき、引数なしの関数でreturnする */}
<button onClick={() => handleCurrentCount(-1)}>-</button>
<button onClick={() => handleCurrentCount(1)}>+</button>
<p>{count}</p>
</div>
</>
);
}
「React実践入門」書籍サンプルコード 3-2-8 は間違いですので、修正したものを掲載します。すでに分かっていると思いますが。
------------------------------------------------------------------------------------------
export default function ForFilter({src}){
{/* 3500円より安い書籍を抽出 配列の絞り込み
const lowPrice=books.filter(src => book.price < 3500); 書籍コード間違い*/}
const lowPrice=src.filter(book => book.price < 3500);
return (
<dl>
{
lowPrice.map(elem =>(
<React.Fragment key={elem.isbn}>
<dt>
<a href={`https://wings.msn.to/books/${elem.isbn}/${elem.isbn}.jpg`}>{elem.title} ({elem.price}円)</a>
</dt>
</React.Fragment>
))
}
</dl>
);
}
繰り返し処理
-------------------------------------
抜粋「React実践入門」
import React from 'react';
export default function RoopList({src}){
return(
<dl>
{ // JSXでは、{...}配下の配列は、そのまま順番に並べて表示するー＞配列処理は{..}内で
src.map(elem => (
<React.Fragment key={elem.isbn}>
<dt>
<a href={`http://localhost/books/${elem.isbn}/${elem.isbn}.jpg`}>{elem.title}({elem.price}円)</a>
</dt>
<dd>{elem.summary}</dd>
</React.Fragment>
))
}
</dl>
);
}
講座について
