javascript - Multi React-Select 未设置值

Question

我正在尝试创建一个可搜索的下拉列表，允许用户仅选择 2 个流派，然后将其添加到流派名称。我目前可以正常工作，但不会设置值或设置所有值？

我让它与另一组代码一起工作，但我无法为材料 ui 选择添加搜索功能。

任何人都知道如何解决这个问题？

const genres = [
    { value: 'acoustic', label: 'acoustic' },
    { value: 'afrobeat', label: 'afrobeat' },
    { value: 'alt-rock', label: 'alt-rock' },
    { value: 'alternative', label: 'alternative' },
    { value: 'brazil', label: 'brazil' },
    { value: 'breakbeat', label: 'breakbeat' },
]


const AddGenre = ({ }) => {

    const [ariaFocusMessage, setAriaFocusMessage] = useState('');
    const [isMenuOpen, setIsMenuOpen] = useState(false);


    const onFocus = ({ focused, isDisabled }) => {
        const msg = `You are currently focused on option ${focused.label}${isDisabled ? ', disabled' : ''
            }`;
        setAriaFocusMessage(msg);
        return msg;
    };

    const onMenuOpen = () => setIsMenuOpen(true);
    const onMenuClose = () => setIsMenuOpen(false);

//trying to set the values here
    const [genreName, setGenreName] = useState([]);

    const handleInputChange = (value, e) => {
         if (e.action === 'input-change') {
             setGenreName(value);
             console.log(genreName)
         }
     }
    

    return (

        <div className="bodyComp">
            <form>
                <label style={style.label} id="aria-label" htmlFor="aria-example-input">
                    Select a Genre
                </label>

                <Select
                    isMulti
                    aria-labelledby="aria-label"
                    ariaLiveMessages={{
                        onFocus,
                    }}
                    onInputChange={handleInputChange}
                    options={genres}
//if I set the value as genres all values are set ?
                    value={genres}
                    inputId="aria-example-input"
                    name="aria-live-color"
                    onMenuOpen={onMenuOpen}
                    onMenuClose={onMenuClose}
                />
            </form>
        </div>


    )
};

export default AddGenre

标签： javascriptreactjsreact-select