小编kei*_*kai的帖子

我已经按照以下说明构建了一个带有 React 和 Material UI 的简单表格： https: //material-ui.com/components/tables/#table。

它工作正常，但滚动条让我烦恼。

是否有一个选项可以让滚动条从红色箭头开始？或者完全删除它？

先感谢您

代码

    <TableContainer component={Paper} style={{maxHeight: 350}}>
    <Table className={styles.table} size="small" stickyHeader>
      <TableHead>
        <TableRow >
          <TableCell className={styles.header}>
            <Checkbox checked={allSelected} onClick={handleSelectAll} color="primary"/>
          </TableCell>
          <TableCell className={styles.header} align="left">Name</TableCell>
          {props.showAdmin && <TableCell className={styles.header}>Admin</TableCell>}
        </TableRow>
      </TableHead>
      <TableBody>
        {props.employees.map(empl => (
          <TableRow key={empl.id}>
            <TableCell>
              <Checkbox checked={isSelected(empl.id)} onClick={() =>handleSelect(empl.id)} className={styles.checkBox} color="primary"/>
            </TableCell>
            <TableCell component="th" scope="row" style={{paddingRight: 30}}>{empl.name}</TableCell>
            {props.showAdmin && <TableCell align="center"><Checkbox disabled checked={empl.isAdmin} className={styles.checkBox}/></TableCell>}
          </TableRow>
        ))}
      </TableBody>
    </Table>
  </TableContainer>

风格

createStyles({
  table: {
   maxWidth: 350,
   maxHeight: 300
  }, …

背景

假设我们都知道debounce来自的函数lodash。

如果用户快速输入1, 12, 123, 1234，它允许我们1234在一定的延迟时间后只进行一次警报，带有。

这非常用于减少请求量，用于优化。

描述

对于普通的输入字段，我们可以使用那种类型debounce并且它可以工作。

问题：一旦我们setState在同一个回调中添加了debounce，debounce就无法正常工作。

有谁知道原因？

import React, { useState } from "react";
import "./styles.css";
import { debounce } from "lodash";

export default function App() {
  const [input, setInput] = useState("");

  const debouceRequest = debounce(value => {
    alert(`request: ${value}`);
  }, 1000);
  const onChange = e => {
    setInput(e.target.value); // Remove this line will lead to …

我正在使用 React 在我的 spfx Web 部件中使用 React 显示更多文本控制器。我需要在我的 web 部件中将 showMore 和 showLess 字符串链接替换为 ExpandMore 和 ExpandLess 材料 ui 图标。有什么方法可以做到这一点吗？

<ShowMoreText
  /* Default options */
  lines={2}
  more="Show More"
  less="Show less"
  anchorClass=""
  onClick={this.executeOnClick}
  expanded={false}
>
  {item["description"]}
</ShowMoreText>

我参考了这个https://npmjs.com/package/react-show-more-text

Typescript 总是抱怨调色板中缺少某些属性。如果我添加//@ts-ignore，我的应用程序就可以正常工作，但我显然想避免这种情况。我是 Typescript 的新手，这是我尝试过的。

import createMuiTheme, { ThemeOptions, Theme } from '@material-ui/core/styles/createMuiTheme';
import { PaletteOptions } from '@material-ui/core/styles/createPalette';

interface IPaletteOptions extends PaletteOptions {
    chip: {
      color: string,
      expandIcon: {
        background: string,
        color: string,
      },
    },
}
interface ITheme extends Theme {
  palette: IPaletteOptions,
}

const theme: ITheme = createMuiTheme({
  typography: {
    fontWeightMedium: 600,
    fontFamily: ['Open Sans', 'Arial', 'sans-serif'].join(','),
  },
  palette: {
    primary: {
      main: '#43C099',
    },
    secondary: {
      main: '#7AF3CA',
    },
    chip: {
      color: '#C2C3C6',
      expandIcon: {
        background: …

我设计了一个使用 TypeScript Material UI 和 Formik 进行验证的表单。我希望在我的文本字段区域中出现一个材质 UI 图标，这是我的代码：

import React from 'react'
import { Formik, Form, FieldAttributes,useField} from 'formik'
import { TextField } from '@material-ui/core'
import CalendarTodayIcon from '@material-ui/icons/CalendarToday'
import * as yup from 'yup'
import './MainInfo.css'

const MyTextField: React.FC<FieldAttributes<{}>> = ({
  placeholder,type,className,style,
  ...props
}) => {
  const [field, meta] = useField<{}>(props);
  const errorText = meta.error && meta.touched ? meta.error : "";
  return (
    <div className='container'>
    <TextField
    placeholder={placeholder}
    className={className}
    style={style}
    type={type}
    {...field}
    helperText={errorText}
    error={!!errorText}
    id="outlined-basic" 
    variant="outlined"
  />
    </div>
  ); …

我正在尝试绘制一些曲线，但效果不太好。

• 我需要的

• 我得到什么

\documentclass{standalone}
\usepackage{tikz}
\usepackage{pgfplots}

\begin{document}
    \begin{tikzpicture}
        \begin{axis}[
            ticks=none,
            xtick distance=1,
            ytick distance=1,
            axis equal image=true,
            grid,
            grid style={gray!50},
            grid=both,
            xlabel={$x$},
            ylabel={$y$},
            axis lines=middle,
            xmin=-4, xmax=9, ymin=-5, ymax=4,
            axis x line=center,
            axis y line=center,
        ]
            \addplot[thick, smooth] plot coordinates
            {
                (-3, -1)
                (-.5, -3)
                (.5, -1.9)
                (1.5, -2.8)
                (3.5, 1)
                (5.5, 3)
                (7.5, -1.95)
                (8, -1.5)
            };
        \end{axis}
    \end{tikzpicture}
\end{document}

是否可以在不添加大量点的情况下构建如此平滑的曲线？在原图中，您可以看到几个参考点。有什么办法可以配置\addplot或者其他命令吗？

经过几个小时的阅读如何绑定它后我放弃了。这是我第一次使用 React，我在 stackoverflow 上查看了 20 多个相关问题，但无法解决我的问题。

我已经按照指南安装了react-multi-carousel组件。

我只是复制并粘贴了常见用法代码，但我收到了这个恼人的错误：

TypeError: Cannot read property 'props' of undefined
Index
src/views/Index.js:107
  104 | responsive={responsive}
  105 | ssr={true} // means to render carousel on server-side.
  106 | infinite={true}
> 107 | autoPlay={this.props.deviceType !== "mobile" ? true : false}
      | ^  108 | autoPlaySpeed={1000}
  109 | keyBoardControl={true}
  110 | customTransition="all .5"

我尝试遵循我找到的几乎所有答案（主要绑定 this），但没有成功。

这是我的代码：

import React from "react";

// reactstrap components
import {
  Container
} from "reactstrap";


import Carousel from 'react-multi-carousel'; …

我有一个 Material UI 自动完成功能，它根据您键入的 3 个字母选择其项目，例如：

您想获取数据库中的所有 Pedro，然后键入“Ped”，它只会为您带来以“Ped”开头的结果。

问题是当我点击自动完成它会立即显示消息“没有选项”，比如

我希望它只在我输入 3 个字符后显示，并且在数据库中没有找到任何“Ped”，例如：

我试图在道具“noOptionsText”中放置一个条件，但它没有用。有谁知道怎么做？

编辑：不使用freeSolo，选项需要是一个对象

我正在努力瞄准似乎由 Material UI TabPanel 自动生成的 Mui Box。（如果我可以关闭它并使用我自己的容器 div 会更好）。

它给了我一个默认的 24px 填充，我需要覆盖它。

据我在网站上看到的，TabPanel 上没有文档。

我猜我需要将 classes={{}} 放在我的反应代码中的 TabPanel 上，但似乎无法让它工作。

任何帮助将非常感激 ：）

我有一个Rowof 按钮，其父级为SingleChildScrollView, 水平方向。包装行的元素后SingleChildScrollView不尊重mainAxisAlignment，特别是 spaceBetween，它们在一起，中间没有空格......

我怎样才能让 spaceBetween 再次工作？

SingleChildScrollView(
  scrollDirection: Axis.horizontal,
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    mainAxisSize: MainAxisSize.max,
    children: const [
      TransportModeButton(
        iconPath: 'images/icons/walking_icon.png',
        text: 'Walking',
      ),
      TransportModeButton(
        iconPath: 'images/icons/bicycle_icon.png',
        text: 'Bike & eScooter',
      ),
      TransportModeButton(
        iconPath: 'images/icons/public_transport_icon.png',
        text: 'Public transport',
      )
    ],
  ),
),