Fatal编程技术网
  • reactjs/
  • Reactjs 如何在材质UI中使用渲染功能渲染选项列表

Reactjs 如何在材质UI中使用渲染功能渲染选项列表

reactjs material-ui

Reactjs 如何在材质UI中使用渲染功能渲染选项列表,reactjs,material-ui,Reactjs,Material Ui,我想更改Autocomplete组件中选项的背景颜色，我能得到的最接近的颜色是使用renderOption属性 问题是我不知道如何迭代（使用map（））我所在状态下的选项 我想做的是 {state.myOptions.map( option => { // here I would like to call renderOption = ..... } 在组件内部 import React, { useEffect } from 'react' import { useForm,

我想更改
Autocomplete
组件中选项的背景颜色，我能得到的最接近的颜色是使用
renderOption
属性

问题是我不知道如何迭代（使用
map（）
）我所在状态下的选项

我想做的是

{state.myOptions.map( option => {
    // here I would like to call renderOption = .....
}
在
组件内部

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);
是否有可能实现类似的功能，或者是否有明确的方式来实现

编辑

这是组件

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

import React，{useffect}来自“React”
从“./hooks/useForm”导入{useForm，Form}
从“@material ui/icons/Event”导入事件图标；
从“@material ui/core”导入{makeStyles，TextField，排版}
从“./inputs/CustomTextField”导入CustomTextField；
从“@material ui/lab”导入{Autocomplete}；
从“react redux”导入{connect}
const EventForm=（道具）=>{
//重演
常量{family}=props
//反应
常量初始状态={
电邮：“，
密码：“”，
错误：{
电邮：“，
密码：“
},
家庭成员：[“rgeg”]
}
const{state，handleOnChange，setState}=useForm（initialState）
useffect（（）=>{
family&&state.familyMembers！==family.members&&setState({
……国家，
家庭成员：family.members
})
})
//材料界面
const useStyles=makeStyles（主题=>(
{
信息：{
marginTop：主题。间距（3）
},
图标：{
背景颜色：“浅灰色”，
填充：“10px”，
边界半径：“50px”，
边框：“2px实心#3F51B5”，
marginBottom：主题。间距（1）
},
排版：{
marginBottom：主题。间距（1），
marginTop：主题。间距（4）
},
customTextField：{
marginTop:主题。间距（0）
},
日期时间包装器：{
marginTop：主题。间距（4）
}
}
))
常量类=useStyles（）
返回(
正在进行的工作。。。




输入此事件的标题
输入此事件的位置
家庭中的哪些成员正在参加
option.name}
//defaultValue={[familyMembers[0]]}
过滤器选择选项
renderInput={（参数）=>(
)}
/>
);
}
//重演
常量mapStateToProps=（状态）=>{
返回{
家庭：state.auth.family
}
}
导出默认连接（MapStateTops）（EventForm）；
如果只想覆盖选项的颜色，可以通过覆盖其样式来实现。无需自定义选项渲染功能

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

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

import React，{useffect}来自“React”
从“./hooks/useForm”导入{useForm，Form}
从“@material ui/icons/Event”导入事件图标；
从“@material ui/core”导入{makeStyles，TextField，排版}
从“./inputs/CustomTextField”导入CustomTextField；
从“@material ui/lab”导入{Autocomplete}；
从“react redux”导入{connect}
const EventForm=（道具）=>{
//重演
常量{family}=props
//反应
常量初始状态={
电邮：“，
密码：“”，
错误：{
电邮：“，
密码：“
},
家庭成员：[“rgeg”]
}
const{state，handleOnChange，setState}=useForm（initialState）
useffect（（）=>{
family&&state.familyMembers！==family.members&&setState({
……国家，
家庭成员：family.members
})
})
//材料界面
const useStyles=makeStyles（主题=>(
{
信息：{
marginTop：主题。间距（3）
},
图标：{
背景颜色：“浅灰色”，
填充：“10px”，
边界半径：“50px”，
边框：“2px实心#3F51B5”，
marginBottom：主题。间距（1）
},
排版：{
marginBottom：主题。间距（1），
marginTop：主题。间距（4）
},
customTextField：{
marginTop:主题。间距（0）
},
日期时间包装器：{
marginTop：主题。间距（4）
},
选项：{
背景颜色：“红色”
}
}
))
常量类=useStyles（）
返回(
正在进行的工作。。。




输入此事件的标题
输入此事件的位置
家庭中的哪些成员正在参加
option.name}
//defaultValue={[familyMembers[0]]}
过滤器选择选项
渲染