

現在ReactでコンポーネントはMUIを使い、state管理はreduxで開発を行っています。  
AutocompleteのfreeSoloでユーザーからの入力を受け付ける、かつ、optionsで用意されている選択肢からも値を選べるようにしたいです。

しかし、下記のコードですと、ユーザーからの入力があった際はe.target.valueに値が入っており、その値を基にreduxでstateを更新できるのですが、例えば与えられている選択肢の"算数"などを選択しても、その値はe.target.valueに入っているわけではないため、reduxでのstate更新がうまくできません。

どなたかアドバイスいただけないでしょうか？

[code]

    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)
                    }}
                    />}
            />)
    };
    
[/code]


CC BY-SA 4.0
2023-02-13T01:06:27.957
93816
2023-02-13T03:16:55.943
2023-02-13T03:16:55.943
54288
54288
question
reactjs redux material-ui
MUIのAutoCompleteでoptionで用意されている選択肢を選んだ時にその値を取得したい