React Material <Select> 与常规 HTML <input> 或 <select>

Posted 2023-02-22

【中文标题】React Material <Select> 与常规 HTML <input> 或 <select>

【英文标题】：React Material <Select> with regular HTML <input> or <select>

【发布时间】：2021-10-25 10:53:58

【问题描述】：

是否可以使用常规 html 或 React Material ？

我想使用材质选择，但它使用我的或。

我知道你有输入属性，但我没有让它工作。

<Select
            labelId="demo-customized-select-label"
            id="demo-customized-select"
            variant="outlined"
            className="form-control"
            input=<input /> // or <select>
          >
            clientAppContext.currentProfile?.profiles?.map((profile: Profile) => (
              <MenuItem key=profile.number value=profile.number>
                <div className="flex flex-col">
                  <span className="text-gray-900 text-sm">profile.name</span>
                  <span className="font-light text-gray-700 text-xs">profile.name - profile.number</span>
                </div>
              </MenuItem>
            ))
          </Select>

【问题讨论】：

你能给我们提供实际的错误吗？或者如果 MenuItem 中的 HTML 没有正确呈现，则截图

@Terminat 没有错误。 在那里，但是当我单击输入时没有任何反应。 相同

@Terminat 你有例子吗？

【参考方案1】：

我检查了它，使其开箱即用的唯一方法是使用 Material UI 提供的 Input。使用原生 HTML 输入元素是不可能的，因为它不知道如何处理 Select 提供的道具。

但是，您可以围绕此本机输入创建一个包装器。 Select 组件将注入您创建自己的自定义下拉菜单所需的所有道具。

查看我创建的这个示例。很抱歉没有正确设置它的样式，但我想专注于让它发挥作用。

记得将native 属性设置为false。否则，它将不允许您控制它是否打开。

App.js

import React,  useState  from 'react';

import Select from '@material-ui/core/Select';
import MenuItem from '@material-ui/core/MenuItem';
import Input from './Input';

function App() 
  const [age, setAge] = useState(10);
  const [isOpen, setIsOpen] = useState(false);
  console.log(isOpen);

  const handleChange = (event) => 
    setAge(event.target.value);
  
  return (
    <div className="App">
      <Select
        labelId="demo-simple-select-label"
        id="demo-simple-select"
        value=age
        onChange=handleChange
        style= width: 500 
        native=false
        open=isOpen
        inputComponent="input"
        inputProps= onClick: () => setIsOpen(true), onBlur: () => setIsOpen(false) 
        input=<Input />
      >
        <MenuItem value=50>
          <div className="flex flex-col">
            <span className="text-gray-900 text-sm">My name</span>
            <span className="font-light text-gray-700 text-xs">My name - 12</span>
          </div>
        </MenuItem>
        <MenuItem value=50>
          <div className="flex flex-col">
            <span className="text-gray-900 text-sm">My name</span>
            <span className="font-light text-gray-700 text-xs">My name - 13</span>
          </div>
        </MenuItem>
        <MenuItem value=50>
          <div className="flex flex-col">
            <span className="text-gray-900 text-sm">My name</span>
            <span className="font-light text-gray-700 text-xs">My name - 14</span>
          </div>
        </MenuItem>
      </Select>
    </div>
  );


export default App;

自定义输入元素 - 原生 HTML 元素的包装器

import React,  useState  from 'react';


function Input(props) 
  console.log(props);

  return (
    <>
      <input value=props.inputProps.value onClick=props.inputProps.onClick onBlur=props.inputProps.onBlur />
      props.inputProps.open ? props.inputProps.children : null
    </>

  );


export default Input;

【讨论】：

不幸的是，您的 sn-p 没有编译。试试看，谢谢

这里没有在 SO 上编译，因为我想分离组件。它应该在本地环境中工作。这里的问题是，导入不起作用。