MUI 芯片：onAdd (Material-UI) 等效 function？

Question

I noticed that "onAdd" property is removed from the updated version of Material-UI, MUI. The only property that is a function is "onDelete" and "onClick". I want to create new chips depending on user input tags. Is there any equivalent way of doing so?

Answer 1

You can use input fields to trigger the creation of new chips. This jsFiddle demo (click "Run" to start the demo) has a button that creates chips.

The important code in that demo relating to your question is below under index.jsx . The key items are:

1. createNewChip function,
2. chipName TextField, and
3. Create New Chip button.

The createNewChip function acts as an event listener for the onClick event of the Create New Chip button. createNewChip takes the text value from the chipName TextField and adds it to the list variable which is managed by React.useState .

list is an array of chip data where each element is an object that looks something like this:

{
    id: '11bf5b37-e0b8-42e0-8dcf-dc8c4aefc000',
    value: 'A Wonderful Chip',
    isValid: true
}

Hopefully, this helps to get you started on a solution.

index.jsx

...

export default function ChipMaker() {
    const [ list, setList ] = React.useState( [] );
    const selectedItems = list.filter( ( item ) => item.isValid );
    const selectedLengthIndex = selectedItems.length - 1;

    let listById = {};
    for ( let item of list ) {
        listById[ item.id ] = item;
    }

    ...

    function createNewChip() {
        let chipName = document.getElementById( 'chipName' ).value;
        let newList = list.concat( {
            id: uuidv4(),
            value: chipName,
            isValid: true
        } );

        setList( newList );
    }

    ...

    return (
        <Stack spacing={3} sx={{ width: 500 }}>
            <Autocomplete
                multiple
                id="tags-filled"
                filterSelectedOptions={ true }
                options={ list.map(( item ) => item.id) }
                value={ list.map(( item ) => item.id) }
                freeSolo
                renderTags={( listIds, getTagProps) =>
                    listIds.map(( id, index) => (
                        <Chip
                            key={ index }
                            variant="outlined"
                            label={ listById[ id ].value }
                            sx={ {
                                color: ( theme ) => {
                                    let chipColor = '#fff';
                                    if ( typeof( listById[ id ] ) == 'object' ) {
                                        chipColor = listById[ id ].isValid
                                            ? theme.palette.common.white 
                                            : theme.palette.common.white
                                    }
                                    return chipColor;
                                },

                                backgroundColor: ( theme ) => {
                                    let chipColor = '#fff';
                                    if ( typeof( listById[ id ] ) == 'object' ) {
                                        chipColor = listById[ id ].isValid
                                            ? theme.palette.primary.main 
                                            : theme.palette.error.main
                                    }
                                    return chipColor;
                                },
                            
                                [`& .MuiSvgIcon-root.MuiSvgIcon-fontSizeMedium.MuiChip-deleteIcon.MuiChip-deleteIconMedium.MuiChip-deleteIconColorDefault.MuiChip-deleteIconOutlinedColorDefault`]: {
                                    fill: ( theme ) => theme.palette.grey[200]                
                                }
                            } }
                            {...getTagProps({ index })}
                        />
                    ))
                }
                renderInput={(params) => (
                    <TextField
                        {...params}
                        variant="filled"
                        label="Material-UI Chip Input Test"
                        placeholder="Favorites"
                    />
                )}
                onChange={ validateInput }
            />

            <div>
                { selectedItems.map( ( item, index ) => {
                    let comma = null;
                    if ( selectedLengthIndex != index ) {
                        comma = (<span key={ 'idx'+index }>, </span>);
                    }

                    return (
                        item.isValid
                            ? <span key={ index }>{ item.value }{ comma }</span>
                            : null
                    );
                } ) }
            </div>

            <TextField
                id='chipName'
                name='chipName'
                className={ 'test' }
                type='text'
                label={ 'Chip name' }
                fullWidth={ false }
                variant='standard'
                inputProps={ { maxLength: 20 } }
                helperText={ 'Enter chip name' }
                InputLabelProps={ {
                    'variant': 'standard',
                    'color': 'primary',
                    'disableAnimation': false
                } }
                FormHelperTextProps={ { 'variant': 'standard' } }
                error={ false }
                defaultValue={ '' }
                placeholder={ 'New chip name' }
                color={ 'info' }
            />

            <Button
                variant={ 'contained' }
                onClick={ createNewChip }
                sx={ {
                    width: '200px'    
                } }
            >
                { 'Create new chip' }
            </Button>
        </Stack>
    );
}


/**
 * Inject component into DOM
 */
root.render(
    <ChipMaker />
);

Answer 2

Actually, I've just come to find out myself that MUI has a component called, "Autocomplete" which is the equivalent of making new chips (and adding tags from user input) with the "ChipInput" component from the older material-UI.