0

現在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)
                }}
                />}
        />)
};

0

この質問に回答するには、ログインする必要があります。

のタグが付いた他の質問を参照する。