実現したいこと
React-Selectで作成したセレクト要素にチェックを入れた内容を、指定の要素に表示させる。
前提
React,TypeScriptで「React-Select」モジュールを使用しております。
チェックボックスにチェックを入れた時、
チェックに紐づくlabelを、指定の要素に表示させたいと思っています。
発生している問題・エラーメッセージ
TypeError: Cannot read properties of undefined (reading 'value')
該当のソースコード
typescript
1import React,{ useState } from 'react'; 2import Select,{ OptionProps } from 'react-select'; 3 4interface Option { 5 value: number; 6 label: string; 7} 8 9const options: Option[] = [ 10 {value: 1, label: "aaa"}, 11 {value: 2, label: "bbb"}, 12 {value: 3, label: "ccc"}, 13 {value: 4, label: "ddd"}, 14 {value: 5, label: "eee"}, 15] 16 17function MyOption(props: OptionProps<Option>){ 18 return( 19 <div> 20 <input 21 type="checkbox" 22 id={props.data.value.toString()} 23 onChange={(e) => props.selectOption(props.data)} 24 checked={props.isSelected} 25 /> 26 <label 27 htmlFor={props.data.value.toString()} 28 > 29 {props.data.label} 30 </label> 31 </div> 32 ) 33} 34 35function DropDwon(){ 36 const [value, setValue] = useState('default'); 37 38// 以下の記述でエラーが発生してしまいます 39 const SelectChange = (event:any) => { 40 setValue(event.target.value); 41 } 42 43 return( 44 <div className="dropdown__box"> 45 <Select 46 options={options} 47 isMulti={true} 48 components={{Option: MyOption}} 49 hideSelectedOptions={false} 50 closeMenuOnSelect={false} 51 onChange={ 52 SelectChange 53 } 54 /> 55 56 <p>{value}</p> 57 </div> 58 ) 59} 60 61export default DropDwon;
試したこと
any型に問題があるのかと思い、「event: React.ChangeEvent<HTMLSelectElement>」という型を使用しましたが、React-Selectで生成される<Select />とは互換性がないようで弾かれてしまいました…。
補足情報(FW/ツールのバージョンなど)
node:v18.12.1
npm:8.19.2
onChange の型はここに書いてあるのでは…。
https://react-select.com/typescript#onchange
ご回答ありがとうございます。
URLを参考に変更してみましたが、下記のエラーが起きてしまいました。
```
型 '(option: Option | null, actionMeta: ActionMeta<Option>) => void' を型 '(newValue: MultiValue<Option>, actionMeta: ActionMeta<Option>) => void' に割り当てることはできません。
パラメーター 'option' および 'newValue' は型に互換性がありません。
型 'readonly Option[]' には 型 'Option' からの次のプロパティがありません: value, label
```
```typescript
import Select,{ OptionProps,ActionMeta } from 'react-select';
const SelectChange = (option: Option | null, actionMeta: ActionMeta<Option>) => {
setValue(value);
}
<Select
options={options}
isMulti={true}
components={{Option: MyOption}}
hideSelectedOptions={false}
closeMenuOnSelect={false}
onChange={ //この行でエラーになります
SelectChange
}
/>
```
newValueとreadonly Option[]とは何を指しているのでしょうか…。
エラーがどういう意味か読み解けず、どのように考えればいいかご教示いただけますと幸いです…。
onChange の最初の引数の型は isMulti の値で変わり、isMulti が false (つまり一つしか選べない) 場合は Option または null だけど、isMulti が true の場合は複数選択なので Option の配列ってことでしょう。
option: や newValue: は引数名なので違ってても問題なくて、readonly は onChange の中で配列を変更しちゃ駄目 (React だから当然だけど) ってことかな。