标签: material-ui

我正在尝试翻译 Material ui 表的表分页。MUI 的人说这是有可能的（问题）。

那么有人知道如何从显示的行标签转换为of${from}-${to} of ${count}

是否可以使用makeStyles和动态生成规则名称props？

我没有看到任何方法可以props访问makeStyles. 我需要这样的东西：

import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles(theme => {
  return props => {
    let newObj = {
      checked: {}
    };
    props.environments.forEach(a => {
      newObj = {
        ...newObj,
        ...{
          ['rdo' + a.name]: {
            color: a.color,
            '&$checked': {
              color: a.color
            }
          }
        }
      };
    });
    return newObj;
  };
});

结果会是这样的：

checked: {},
rdoQA: {
  color: '#FF9800',
  '&$checked': {
    color: '#FF9800'
  }
},
rdoLive: {
  color: '#c62828',
  '&$checked': { …

目前，我的组件如下所示：

<Menu
      id="customized-menu"
      className={classes.root}
      anchorEl={blogMenuAnchorEl}
      getContentAnchorEl={null}
      anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
      transformOrigin={{ vertical: 'top', horizontal: 'center' }}
      open={blogMenu}
      onClose={closeBlogDropDown}
    >
      <MenuItem>
        <ListItemText primary="Latest Posts" />
      </MenuItem>
      <Divider variant="fullWidth" />
      <MenuItem>
        <ListItemText primary="Learn French" />
      </MenuItem>
      <MenuItem>
        <ListItemText primary="Learn Latin" />
      </MenuItem>
      <MenuItem>
        <ListItemText primary="Learn Italian" />
      </MenuItem>
    </Menu>
  );

当然，这个下拉菜单会缩小以适应它列出的项目。但是，如果我希望下拉菜单是全角的怎么办？我想他们称之为超级菜单。我尝试添加一个width: '100%'到组件的样式中，但它没有效果，因为实际的下拉 div 是在运行时生成的，而我在脚本编写期间无法访问它。

存储库位于https://github.com/amitschandillia/proost/tree/master/web_SO，有问题的组件是https://github.com/amitschandillia/proost/blob/master/web_SO/components/BlogDropDown。 jsx .

参考：这是我想要模仿的图像：

我试图将弹出菜单作为每个表行的操作列表。单击“Action”时，“handleMenuClick”函数始终为所有记录打印“Jan 04”

import React from "react";
import ReactDOM from "react-dom";
import {Table,TableHead,TableBody,TableRow,TableCell} from "@material-ui/core";
import { Flex, Box } from "reflexbox";
import Icon from "@mdi/react";
import { mdiDotsVertical } from "@mdi/js";
import Button from "@material-ui/core/Button";
import Menu from "@material-ui/core/Menu";
import MenuItem from "@material-ui/core/MenuItem";
const list = [
  { Val1: "Jan 01", Val2: 4000, Val3: 2400 },
  { Val1: "Jan 02", Val2: 3000, Val3: 1398 },
  { Val1: "Jan 03", Val2: 2000, Val3: 6800 },
  { Val1: "Jan 04", Val2: 6780, …

WebContext.js

import React, { createContext, Component } from 'react';

export const WebContext = createContext();

class WebContextProvider extends Component {
    state = {
        inputAmount: 1,
    };

    render() {
        return <WebContext.Provider value={{ ...this.state }}>{this.props.children}</WebContext.Provider>;
    }
}

export default WebContextProvider;

应用程序.js

const App = () => {

return (
        <WebContextProvider>
            <UpdateBtn />
        </WebContextProvider>
    );
};

export default App;

更新Btn.js

const UpdateBtn = () => {

return (
        <Div>
            <Button onClick={} />
        </Div>
    );
};

export default UpdateBtn;

如何在UpdateBtn.js中单击按钮时更新WebContext.js中存在的inputAmount …

我试图在单击时获取图标按钮的“名称”

我读过有关使用材质 UI 的内容，但我不断从处理程序中收到“未定义”消息

import React from 'react'
import {IconButton} from '@material-ui/core'
import InfoIcon from '@material-ui/icons/InfoOutlined'

const App = () => {

    const handleIconClicks = (e) => {
        console.log(e.target.name)
    }
    return (
        <div>
            <IconButton name="details" onClick={(e) => handleIconClicks(e)}>
                <InfoIcon />
            </IconButton>
        </div>
    )
}
export default App

handleIconClicks() 应该返回 event.target 的名称，而不是我得到未定义

我有一个工作得非常好的 RadioGroup。当我将 RadioGroup 移动到它自己的函数中时，“选择”不起作用。就好像组件无法完全重新渲染一样。当我附加onChange使用状态挂钩的事件时会发生这种情况。您可以在这里看到，无线电 1 和 2 运行良好。无线电 3 和 4 没有。

CodeSandbox 材质 UI RadioBox 示例

这是我正在使用的组件。未包装到函数中的 RadioGroup 效果很好。那就是——它不“选择”。意味着黑点不会出现在选择单选按钮中。

function Demo(props) {
  const [inputs, setInputs] = useState({});

  const handleInputChange = event => {
    event.persist();
    setInputs(inputs => ({
      ...inputs,
      [event.target.name]: event.target.value
    }));

    console.debug(`${event.target.name}: ${event.target.value}`);
  };

  const NotWorking = props => {
    return (
      <RadioGroup aria-label="two" name="two" row onChange={handleInputChange}>
        <FormControlLabel
          value="3"
          control={<Radio color="primary" />}
          label="3"
          labelPlacement="end"
        />
        <FormControlLabel
          value="4"
          control={<Radio />}
          label="4"
          labelPlacement="end"
        />
      </RadioGroup>
    );
  };

  return ( …

我正在为 React 组件使用 Material UI。请参阅下面的代码并了解我如何绑定工具提示标题属性。

<Tooltip disableFocusListener title={xyzStore.mytestMultiLineContent}   >
    <span>
        <Button color={'primary'}   variant={'contained'}
            onClick={this.handleXYZ}
            disabled={!xyzStore.canSaveXYZ}
        >
            <Icon fontSize={'small'} >{'save'}</Icon>
            <Typography variant={'button'} >{'Save XYZ'}</Typography>
        </Button>
    </span>
</Tooltip>

属性mytestMultiLineContent包含多行数据，例如

<Tooltip disableFocusListener title={xyzStore.mytestMultiLineContent}   >
    <span>
        <Button color={'primary'}   variant={'contained'}
            onClick={this.handleXYZ}
            disabled={!xyzStore.canSaveXYZ}
        >
            <Icon fontSize={'small'} >{'save'}</Icon>
            <Typography variant={'button'} >{'Save XYZ'}</Typography>
        </Button>
    </span>
</Tooltip>

由于数据设置为标题属性，因此它将被编码出来。有没有办法实现多行字符串数据显示在Tooltip上？

我有以下 React 组件：

<SweetAlert 
    show={this.props.message} 
    success 
    title={this.props.message}
    onConfirm={this.props.handleCloseAlert}>
</SweetAlert>

这是我收到的警报：

success但我希望在执行时动态选择道具，所以我尝试了以下方法：

 const alertType = () => {
    switch(this.props.type) {
        case ALERT_ERROR:
          return 'error'
        case ALERT_WARNING:
          return 'warning'
        case ALERT_DANGER:
          return 'danger'
        case ALERT_INFO:
          return 'info'
        case ALERT_SUCCESS:
          return 'success'
      }
    }

<SweetAlert 
    show={this.props.message} 
    {...alertType()}
    title={this.props.message}
    onConfirm={this.props.handleCloseAlert}>
</SweetAlert>

但我失去了它的警报类型：

我还没有找到向组件添加任意道具的方法。

我正在使用 Select，在 React 的 Material UI 中，当我从选择器中选择时，我总是得到未定义的结果。当我们使用价值动态时，这种情况总是MenuItem会发生。但如果我使用静态值而不是动态值，它效果很好。但我必须以动态方式与.map运算符一起使用。

请提供在动态值方面效果良好的解决方案。

像这样-> <MenuItem value={SOME-DYNAMIC-VALUE} />

this.state.selectedTagetIdentity = '';

onTargetIdentityChange = (event) => {
  this.setState({ selectedTagetIdentity: event.target.value }); // its undefined always 
}

const splitedIdenties = { 
 'abc1' :[{ id: 12, age: '2' },{ id: 13, age: '3' }], 
 'abc2': [{ id: 14, age: '22' },{ id: 15, age: '25' }] 
};

<Select value={selectedTagetIdentity} onChange={onTargetIdentityChange}>
  {Object.keys(splitedIdenties).map((identityTypeKey, identityTypeIndex) => 
    <div key={identityTypeIndex}>
      <ListSubheader>{identityTypeKey}</ListSubheader>
      {splitedIdenties[identityTypeKey].map(identity => 
        <MenuItem key={identity.id} value={identity.id}>{identity.age}</MenuItem>
        )}
    </div> …