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

Question

是否可以使用常规 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>

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