現在ReactでコンポーネントはMUIを使い、state管理はreduxで開発を行っています。
AutocompleteのfreeSoloでユーザーからの入力を受け付ける、かつ、optionsで用意されている選択肢からも値を選べるようにしたいです。
しかし、下記のコードですと、ユーザーからの入力があった際はe.target.valueに値が入っており、その値を基にreduxでstateを更新できるのですが、例えば与えられている選択肢の"算数"などを選択しても、その値はe.target.valueに入っているわけではないため、reduxでのstate更新がうまくできません。
どなたかアドバイスいただけないでしょうか?
import { Autocomplete, TextField } from '@mui/material';
import React from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { selectTest, changeSubject } from '../../../slice/testSlice';
export const TestPage = () => {
const test = [
{ label: "算数" },
{ label: "国語" },
];
const State = useSelector(selectTest);
const dispatch = useDispatch();
const change = (type,value) => {
dispatch(changeSubject(type, value));
}
return (
<Autocomplete id="test" freeSolo size='small' sx={{ maxWidth: 195 }}
options={test} value={{ label: State.subject != "" ? State.subject : "" }} getOptionLabel={(option) => option.label}
renderInput={(params) =>
<TextField variant="standard" {...params} label="テスト" value={State.subject != "" ? State.subject : ""}
InputLabelProps={{ shrink: true }}
onChange={(e) => {
const type = "title";
change(type, e.target.value)
}}
/>}
/>)
};