如何在材质 UI 中使用 renderOption 渲染选项列表

IT技术 reactjs material-ui
2021-05-12 17:25:37

我想更改Autocomplete组件内选项的背景颜色，我能得到的最接近的是使用renderOptionprops。

问题是我不知道如何迭代（使用map()）我在我的状态下拥有的选项。

我想做的是类似的事情

{state.myOptions.map( option => {
    // here I would like to call renderOption = .....
}

<Autocomplete/>组件内部

是否有可能实现这样的事情，或者是否有明确的方式来做到这一点？

编辑

这是组件

import React, { useEffect } from 'react'
import { useForm, Form } from './hooks/useForm'
import EventIcon from '@material-ui/icons/Event';
import { makeStyles, TextField, Typography } from '@material-ui/core'
import CustomTextField from './inputs/CustomTextField';
import { Autocomplete } from '@material-ui/lab';
import { connect } from 'react-redux'




    const EventForm = (props) => {
    
        // Redux 
        const { family } = props
    
        // React 
        const initialState = {
            email: "",
            password: "",
            errors: {
                email: "",
                password: ""
            },
            familyMembers: ["rgeg"]
        }
    
        const { state, handleOnChange, setState } = useForm(initialState)
    
        
    
        useEffect(() => {
            family && state.familyMembers !== family.members && setState({
                ...state,
                familyMembers: family.members
            })
        })
    
        // Material UI
        const useStyles = makeStyles(theme => (
            {
                message: {
                    marginTop: theme.spacing(3)
                },
                icon: {
                    backgroundColor: "lightgrey",
                    padding: "10px",
                    borderRadius: "50px",
                    border: "2px solid #3F51B5",
                    marginBottom: theme.spacing(1)
    
                },
                typography: {
                    marginBottom: theme.spacing(1),
                    marginTop: theme.spacing(4)
                },
                customTextField: {
                    marginTop: theme.spacing(0)
                },
                dateTimeWrapper: {
                    marginTop: theme.spacing(4)
                }
            }
        ))
    
        const classes = useStyles()
    
        return (
            <>
                <div>WORK IN PROGRESS...</div>
                <br />
                <br />
                <EventIcon className={classes.icon} />
                <Form
                    title="Add new event"
                >
                    <Typography
                        variant="subtitle1"
                        className={classes.typography}
                        align="left">
                        Enter a title for this event
                        </Typography>
                    <CustomTextField
                        className={classes.customTextField}
                        label="Title"
                    />
                    <Typography
                        variant="subtitle1"
                        className={classes.typography}
                        align="left">
                        Enter a location for this event
                        </Typography>
                    <CustomTextField
                        className={classes.customTextField}
    
                        label="Location"
                    />
                    <Typography
                        variant="subtitle1"
                        className={classes.typography}
                        align="left">
                        Which member/s of the family is/are attending
                        </Typography>
                    <Autocomplete
                        multiple
                        id="tags-outlined"
                        options={state.familyMembers}
                        getOptionLabel={(option) => option.name}
                        // defaultValue={[familyMembers[0]]}
                        filterSelectedOptions
                        renderInput={(params) => (
                            <TextField
                                {...params}
                                variant="outlined"
                                label="Members Attending"
                                placeholder="Family Member"
                            />
                        )}
                    />
                </Form>
            </>
        );
    }
    
    // Redux
    const mapStateToProps = (state) => {
        return {
            family: state.auth.family
        }
    }
    
    export default connect(mapStateToProps)(EventForm);
2个回答

如果您只想覆盖选项的颜色，您可以通过覆盖它的样式来实现。无需制作自定义选项渲染功能。

以上是您如何实现这一目标的示例。

import React, { useEffect } from 'react'
import { useForm, Form } from './hooks/useForm'
import EventIcon from '@material-ui/icons/Event';
import { makeStyles, TextField, Typography } from '@material-ui/core'
import CustomTextField from './inputs/CustomTextField';
import { Autocomplete } from '@material-ui/lab';
import { connect } from 'react-redux'

const EventForm = (props) => {
    // Redux 
    const { family } = props

    // React 
    const initialState = {
        email: "",
        password: "",
        errors: {
            email: "",
            password: ""
        },
        familyMembers: ["rgeg"]
    }

    const { state, handleOnChange, setState } = useForm(initialState)

    useEffect(() => {
        family && state.familyMembers !== family.members && setState({
            ...state,
            familyMembers: family.members
        })
    })

    // Material UI
    const useStyles = makeStyles(theme => (
        {
            message: {
                marginTop: theme.spacing(3)
            },
            icon: {
                backgroundColor: "lightgrey",
                padding: "10px",
                borderRadius: "50px",
                border: "2px solid #3F51B5",
                marginBottom: theme.spacing(1)

            },
            typography: {
                marginBottom: theme.spacing(1),
                marginTop: theme.spacing(4)
            },
            customTextField: {
                marginTop: theme.spacing(0)
            },
            dateTimeWrapper: {
                marginTop: theme.spacing(4)
            },
            option: {
              backgroundColor: 'red'
            }
        }
    ))

    const classes = useStyles()

    return (
        <>
            <div>WORK IN PROGRESS...</div>
            <br />
            <br />
            <EventIcon className={classes.icon} />
            <Form
                title="Add new event"
            >
                <Typography
                    variant="subtitle1"
                    className={classes.typography}
                    align="left">
                    Enter a title for this event
                    </Typography>
                <CustomTextField
                    className={classes.customTextField}
                    label="Title"
                />
                <Typography
                    variant="subtitle1"
                    className={classes.typography}
                    align="left">
                    Enter a location for this event
                    </Typography>
                <CustomTextField
                    className={classes.customTextField}
                    label="Location"
                />
                <Typography
                    variant="subtitle1"
                    className={classes.typography}
                    align="left">
                    Which member/s of the family is/are attending
                    </Typography>
                <Autocomplete
                    multiple
                    id="tags-outlined"
                    classes={{
                        option: classes.option
                    }}
                    options={state.familyMembers}
                    getOptionLabel={(option) => option.name}
                    // defaultValue={[familyMembers[0]]}
                    filterSelectedOptions
                    renderInput={(params) => (
                        <TextField
                            {...params}
                            variant="outlined"
                            label="Members Attending"
                            placeholder="Family Member"
                        />
                    )}
                />
            </Form>
        </>
    );
}

// Redux
const mapStateToProps = (state) => {
    return {
        family: state.auth.family
    }
}

export default connect(mapStateToProps)(EventForm);

哇，这花了一段时间，但解决方案似乎使用了 'renderTags' algong

这是确切的解决方案

import React, { useEffect } from 'react'
import { useForm, Form } from './hooks/useForm'
import EventIcon from '@material-ui/icons/Event';
import { makeStyles, TextField, Typography } from '@material-ui/core'
import CustomTextField from './inputs/CustomTextField';
import { Autocomplete } from '@material-ui/lab';
import { connect } from 'react-redux'
import Chip from '@material-ui/core/Chip';
import getColorvalue from './outputs/ColorValues'




const EventForm = (props) => {

    // Redux 
    const { family } = props

    // React 
    const initialState = {
        email: "",
        password: "",
        errors: {
            email: "",
            password: ""
        },
        familyMembers: ["rgeg"]
    }

    const { state, handleOnChange, setState } = useForm(initialState)



    useEffect(() => {
        family && state.familyMembers !== family.members && setState({
            ...state,
            familyMembers: family.members
        })
    })

    // Material UI
    const useStyles = makeStyles(theme => (
        {
            message: {
                marginTop: theme.spacing(3)
            },
            icon: {
                backgroundColor: "lightgrey",
                padding: "10px",
                borderRadius: "50px",
                border: "2px solid #3F51B5",
                marginBottom: theme.spacing(1)

            },
            typography: {
                marginBottom: theme.spacing(1),
                marginTop: theme.spacing(4)
            },
            customTextField: {
                marginTop: theme.spacing(0)
            },
            dateTimeWrapper: {
                marginTop: theme.spacing(4)
            }
        }
    ))

    const classes = useStyles()

    return (
        <>
            <div>WORK IN PROGRESS...</div>
            <br />
            <br />
            <EventIcon className={classes.icon} />
            <Form
                title="Add new event"
            >
                <Typography
                    variant="subtitle1"
                    className={classes.typography}
                    align="left">
                    Enter a title for this event
                    </Typography>
                <CustomTextField
                    className={classes.customTextField}
                    label="Title"
                />
                <Typography
                    variant="subtitle1"
                    className={classes.typography}
                    align="left">
                    Enter a location for this event
                    </Typography>
                <CustomTextField
                    className={classes.customTextField}

                    label="Location"
                />
                <Typography
                    variant="subtitle1"
                    className={classes.typography}
                    align="left">
                    Which member/s of the family is/are attending
                    </Typography>
                <Autocomplete
                    multiple
                    id="tags-outlined"
                    renderTags={(value, getTagProps) =>
                        value.map((option, index) => (
                            <Chip
                                variant="outlined"
                                key={option}
                                style={{
                                    backgroundColor: `${getColorvalue(state.familyMembers[state.familyMembers.indexOf(option)].color)}`,
                                    color: "white"
                                }}
                                label={option.name}
                                onDelete={() => console.log("test")}
                                {...getTagProps({ index })}
                            />
                        ))
                    }
                    options={state.familyMembers}
                    getOptionLabel={(option) => option.name}
                    // defaultValue={[familyMembers[0]]}
                    filterSelectedOptions
                    renderInput={(params) => (
                        <TextField
                            {...params}
                            variant="outlined"
                            label="Members Attending"
                            placeholder="Family Member"
                        />
                    )}
                />
            </Form>
        </>
    );
}

// Redux
const mapStateToProps = (state) => {
    return {
        family: state.auth.family
    }
}

export default connect(mapStateToProps)(EventForm);
其它你可能感兴趣的问题
上一篇React Datepicker 输入状态没有改变？ 下一篇不能在module之外使用 import 语句 Electron React Typescript