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

本文介绍了如何在材质UI中使用renderOption渲染选项列表的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我想更改 Autocomplete 组件内部选项的背景颜色，而我能获得的最接近的颜色是使用 renderOption 道具.

I want to change the background colour of the options inside an Autocomplete component, and the closest I can get is by using the renderOption prop.

问题是我无法弄清楚如何(使用 map())迭代状态下的选项.

The problem is that I can't figure out how to iterate (using map()) the options that I have in my state.

我想做的是类似的事情

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

在<自动完成/> 组件内部

是否可以实现类似的方式?或者是否有明确定义的方式来实现?

Is it possible to implement something like this or is there a well defined manner to do it?

编辑

这是组件

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);

推荐答案

哇，这花了一段时间，但解决方案似乎将

Wow, this took a while but the solution seems to use 'renderTags' algong with

这是确切的解决方法

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);