在将textField组件与select一起使用时出现严重的ui警告

时间:2019-11-26 08:08:40

标签: reactjs material-ui

使用TextField作为Select的输入参数会给出以下警告:

  

材料用户界面:将children组件与TextField一起使用时,必须传递select

<Select
    multiple        
    value="value"
    fullWidth
    input={
        <TextField name="name" id="id" variant="outlined" label="test"/>
    }
>
 <MenuItem>1</MenuItem>
 <MenuItem>2</MenuItem>
</Select>

相同的正确实现是什么?

1 个答案:

答案 0 :(得分:4)

正确的方法是将TextField渲染为父组件,并为其提供select属性

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import MenuItem from '@material-ui/core/MenuItem';
import TextField from '@material-ui/core/TextField';

const useStyles = makeStyles(theme => ({
  root: {
    width: '100px'
  },
}));

export default function SelectTextField() {
  const classes = useStyles();

  return (   
    <TextField 
    classes={{root:classes.root}}
    select
    name="name" 
    id="id" 
    variant="outlined" 
    label="test"
    SelectProps={{
      multiple: true,
      value: []
    }}
    >
      <MenuItem>1</MenuItem>
      <MenuItem>2</MenuItem>
    </TextField>
    );
}

Code Sandbox