javascript - 如何构建自定义material-ui组件

Question

我必须自定义 TextField组件来构建持续时间组件。


任何帮助，将不胜感激。

Answer 1

我认为简单地为您提供一个实现并不符合 SO 的精神，因此我将尝试帮助您打破这一点，并为您指明应该对您有帮助的文档的方向以及一种可行的方法为你。
看起来您需要将一些较低级别的 MUI 组件组合在一起。看看MUI TextField关于定制的文档，您可以看到使用 InputBase 的示例，您可能需要。
这里的另一点是任何 TextField MUI 中的组件将为您提供更改事件的单个值。看起来你在这里拥有的是一个复合值。

function DurationField({ value, onChange }) {
  // For example, you could model the value for this field to be an array of two values.
  const [hours, minutes] = value
  return (
    // instead of div, you may need FormControl and FormControlLabel, etc.
    <div>
      <InputBase value={hours} onChange={(e) => {
        onChange([e.target.value, minutes])
      }} />
      <InputBase value={minutes} onChange={(e) => {
        onChange([hours, e.target.value])
      }} />
    </div>
  )
}

您还必须考虑焦点状态会是什么样子。用户如何使用键盘导航进入、通过和退出此输入？这些风格是什么样的？
但从这里，你应该看看 FormControl等等，您可以在 TextField 的底部找到所有较低级别的组件我链接到的文档页面。通过使用这些，在需要的地方仔细覆盖样式，并精心设计 value/onChange Prop ，您应该能够制作一个在 MUI 世界中运行良好的组件。