小编ang*_*gus的帖子

material-ui Drawer - findDOMNode is deprecated in StrictMode

I have a simple ReactJS app based on hooks (no classes) using StrictMode.

I am using React version 16.13.1 and Material-UI version 4.9.10.

In the Appbar I am using Drawer.

    <div className={classes.root}>
        <AppBar position="static">
            <Toolbar>
                <IconButton
                    edge="start"
                    className={classes.menuButton}
                    color="inherit"
                    aria-label="menu"
                    onClick={handleDrawerOpen}>
                    <MenuIcon />
                </IconButton>
                <Typography variant="h6" className={classes.title}>
                    Online Information
                </Typography>
            </Toolbar>
        </AppBar>
        <Drawer
            variant="persistent"
            anchor="left"
            open={open}
        ></Drawer>
    </div>
Run Code Online (Sandbox Code Playgroud)

I notice that when I open the Drawer, I get the following warning.

Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed …
Run Code Online (Sandbox Code Playgroud)

strict-mode reactjs deprecation-warning material-ui react-navigation-drawer

123
推荐指数
4
解决办法
6万
查看次数

DataTable clearFilter()无法正常工作

我有一个复杂的JSF,其中包含dataTable,每个列都有过滤器.为了确保生成按钮首先获取所有数据,我需要在用户按下按钮时清除所有过滤器.

我尝试使用onclick,但后来我看不到blockUI我也尝试完成(ajax)但是它再次无法正常使用所有其他项目(blockUI,消息).我决定尝试通过服务器端清除过滤器,但只有dataTable.reset()正在工作.

我没有更多的想法如何清洁过滤器???

这个API有效吗?

感谢您的帮助

谢谢

<h:panelGrid columns="1" style="width: 100%">
    <p:panel id="vt-panel">
        <h:panelGrid columns="5" cellpadding="2" >  
            <h:outputText value="Start Date"  />
            <p:calendar id="vt-start" value="#{vtRepBean.startDate}" binding="#{startDateComponent}" maxlength="9" size="9" pattern="dd-MMM-yy" title="dd-MMM-yy" required="true" maxdate="#{vtRepBean.endDate}">
                <p:ajax event="dateSelect" listener="#{vtRepBean.handleStartDateSelect}" update=":mainForm:vt-end"/>
            </p:calendar>
            <h:outputText value="End Date"  />
            <p:calendar id="vt-end" value="#{vtRepBean.endDate}" maxlength="9" size="9" pattern="dd-MMM-yy" title="dd-MMM-yy" required="true" mindate="#{vtRepBean.startDate}">
                <p:ajax event="dateSelect" listener="#{vtRepBean.handleEndDateSelect}" update=":mainForm:vt-start"/>
            </p:calendar>
            <p:commandButton
                id="genVtBtn"
                value="Generate"
                actionListener="#{vtRepBean.handleVTGenerateButton}"
                update=":mainForm:vt-panel,:mainForm:vt-panel-table">
            </p:commandButton>
        </h:panelGrid>
    </p:panel>
</h:panelGrid> 
<p:growl id="vt_message" showDetail="true" autoUpdate="true"/>
<h:panelGroup id="vt-panel-table">
    <p:dataTable id="vtDataTable"
                 widgetVar="vtWidget"
                 var="reportObject"
                 value="#{vtRepBean.reportObjectsList}"
                 rendered="#{vtRepBean.renderVTReport}"
                 filteredValue="#{vtRepBean.filteredVTList}"
                 paginator="true"
                 paginatorPosition="bottom"
                 paginatorTemplate="{RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} …
Run Code Online (Sandbox Code Playgroud)

primefaces jsf-2

16
推荐指数
3
解决办法
3万
查看次数

如何配置maven以使用servlet 3

我想升级我的webapp以使用servlet 3.0(插入2.5).我使用的是WebLogic Server版本:12.1.1.0(12c),maven,java 7_10和NetBeans 7.3.1

由于某种原因,唯一可用的servlet-api是3.0-alpha-1而不是3.0

<project xmlns="http://maven.apache.org/POM/4.0.0"      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
     xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>

<dependencies>
    <dependency>
        <groupId>javax</groupId>
        <artifactId>javaee-web-api</artifactId>
        <version>6.0</version>
        <scope>provided</scope>
    </dependency>
    <dependency>
        <groupId>javax.servlet</groupId>
        <artifactId>servlet-api</artifactId>
        <version>3.0-alpha-1</version>
        <scope>provided</scope>
    </dependency>
    <dependency>
        <groupId>javax.servlet.jsp</groupId>
        <artifactId>jsp-api</artifactId>
        <version>2.1</version>
        <scope>provided</scope>
    </dependency>
    <dependency>
        <groupId>jstl</groupId>
        <artifactId>jstl</artifactId>
        <version>1.2</version>
        <scope>provided</scope>
    </dependency>
    <dependency>
        <groupId>org.apache.myfaces.core</groupId>
        <artifactId>myfaces-api</artifactId>
        <version>2.1.8</version>
        <scope>compile</scope>
    </dependency>
    <dependency>
        <groupId>org.apache.myfaces.core</groupId>
        <artifactId>myfaces-impl</artifactId>
        <version>2.1.8</version>
        <scope>compile</scope>
    </dependency>
Run Code Online (Sandbox Code Playgroud)

java java-ee maven servlet-3.0

13
推荐指数
2
解决办法
2万
查看次数

如何自定义材料表中的默认导出选项

我正在使用材料表,我想删除默认的 CSV 和 PDF 导出选项。

我只想有一个 Excel 选项。

我怎样才能更改菜单​​?

在此输入图像描述

谢谢

reactjs material-ui material-table

7
推荐指数
2
解决办法
1万
查看次数

Material-UI:必须指定 `image` 或 `src` 属性

它看起来像 CardMedia 在创建组件时需要一个图像。由于我是通过 componentDidMount (RestAPI) 拉取图像数据,因此组件已经安装。

componentDidMount() {
   // get all items via category ID and owner ID 
    const restApi = new API({ url: 'api' })
    restApi.createEntity({ name: 'items' })
    // api/items/<categoryId>/<ownerId>
    restApi.endpoints.items.getTwo({ id_a: this.props.categoryId, id_b: this.props.ownerId }).then(({ data }) => this.setState({ appData: data }))
}



render() {
    const { classes } = this.props;

    let classNameHolder = [classes.redAvatar, classes.greenAvatar, classes.blueAvatar, classes.purpleAvatar];
    this.state.appData.map(element => {
        this.state.images.push(element.imageUrl);
    });

    return (
        < Card >
            <CardHeader
                avatar={
                    <Avatar aria-label="Recipe"
                        className={classNameHolder[Math.floor(Math.random() * classNameHolder.length)]}>
                        {this.props.userName.charAt(0).toLocaleUpperCase()}
                    </Avatar>} …
Run Code Online (Sandbox Code Playgroud)

reactjs material-ui

6
推荐指数
2
解决办法
1万
查看次数

如何通过服务器端重置数据表过滤器

我的主要 jsf 包括 2 个 jsf,其中每个都有一个带有过滤选项的表。

这是主要内容的一个简短示例:

  <h:panelGroup id="b1">
                <p:commandButton
                    value="exe"
                    actionListener="#{bean.handle}"
                    rendered="#{bean.render}"
                    update=":mainForm:panel1,:mainForm:panel2">
                </p:commandButton>
            </h:panelGroup>
        </h:panelGrid>
    </p:panel>

    <ui:include src="table1.xhtml" />
    <ui:include src="table2.xhtml" />
Run Code Online (Sandbox Code Playgroud)

问题是我需要在更改 2 个表之间的视图时删除过滤器我不能通过 clearFilters 使用客户端,因为我有 2 个表:

<p:commandButton
oncomplete="table1Widget.clearFilters() ????"
Run Code Online (Sandbox Code Playgroud)

所以我想最好的地方是通过 handle 方法在服务器端,但过滤器列表是空的,表格也是

DataTable dt1 = (DataTable) FacesContext.getCurrentInstance().getViewRoot().findComponent("mainForm: .... ");
Run Code Online (Sandbox Code Playgroud)

如何重置过滤器?

谢谢

primefaces jsf-2

5
推荐指数
1
解决办法
8622
查看次数

如何通过RequestContext更新

我试图通过使用RequestContext.update()更新表以下代码正在工作(jsf):

<h:panelGrid columns="2" style="width: 100%" columnClasses="treeColumn,tableColumn">
        <h:panelGroup id="treePanel">
            <p:tree id="tree" 
                    value="#{bean.root}" 
                    var="node" 
                    dynamic="true"
                    cache="true"
                    animate="true"
                    selectionMode="single"
                    selection="#{bean.selectedNode}"
                    rendered="#{bean.renderTree}"> 
                <p:ajax event="select" listener="#{bean.onNodeSelect}" update=":mainForm:treePanel,:mainForm:tablePanel"/>
                <p:ajax event="collapse" listener="#{bean.onNodeCollapse}"/>
                <p:treeNode expandedIcon="ui-icon-folder-open"  
                            collapsedIcon="ui-icon-folder-collapsed">  
                    <h:outputText value="#{node.name}" styleClass="tableTreeText"/>  
                </p:treeNode> 
                 <p:treeNode expandedIcon="ui-icon-folder-open"  
                             collapsedIcon="ui-icon-folder-collapsed">  
                    <h:outputText value="#{node.name}" styleClass="tableTreeText"/>  
                </p:treeNode> 
            </p:tree> 
        </h:panelGroup>
        <h:panelGroup id="tablePanel" styleClass="acqPanelTable">
            <p:dataTable id="acqDataTable"
                         widgetVar="acqTablehdsWidget"
                         var="acq"
                         value="#{bean.list}" 
                         rendered="#{bean.renderTable}"
                         filteredValue="#{bean.filteredList}"
                         paginator="true"
                         paginatorPosition="bottom"

     .....
     ....
     ...
     ..
     .
Run Code Online (Sandbox Code Playgroud)

但不是通过服务器端:

 RequestContext requestContext = RequestContext.getCurrentInstance();
 requestContext.update(":mainForm:tablePanel");
 renderTable = true;
Run Code Online (Sandbox Code Playgroud)

我不明白有什么不同?

感谢您对任何建议的帮助

谢谢

primefaces jsf-2

5
推荐指数
2
解决办法
2万
查看次数

随机设置&lt;Avatar&gt;背景颜色

我在样式主题中定义了三种backgroundColor。

avatar: {
    backgroundColor: red[500],
},
orangeAvatar: {
    margin: 10,
    color: '#fff',
    backgroundColor: deepOrange[500],
},
purpleAvatar: {
    margin: 10,
    color: '#fff',
    backgroundColor: deepPurple[500],
}, 
Run Code Online (Sandbox Code Playgroud)

当头像加载时,我想随机选择其中之一。

<Card>
            <CardHeader
                avatar={
                    <Avatar id="av" aria-label="Recipe"
                        className={classes.avatar}>{this.props.userName.charAt(0).toLocaleUpperCase()}
                    </Avatar>}
                title={this.props.userName} disableTypography={true}/>
            <CardActionArea disabled={this.state.images.length == 1 ? true : false}>
                <CardMedia
                    id={this.props.ownerId}
                    className={classes.media}
                    image={this.state.images[this.state.imageIndex]}
                    onClick={this.handleOnClick}
                />
            </CardActionArea>
        </Card>
Run Code Online (Sandbox Code Playgroud)

有什么建议如何做到这一点?

谢谢

reactjs material-ui

5
推荐指数
2
解决办法
8509
查看次数

如何使用 Promise.all 处理数千个请求

在我的 React 应用程序中,我有一个组件将请求发送到一个在线服务,该服务最多可以处理 50 个请求。我现在收到一个执行 7000 个 MAC 的新请求。

function App() {
const [data, setData] = useState([]);

useEffect(() => {
     const fetchData = async () => {
        await axios.all([
             axios.get("/ipdn/<MAC ADDRESS>", { timeout: 10000 }),
             axios.get("/ipdn/<MAC ADDRESS>", { timeout: 10000 })
       // Adding all the mac address ....... 
        ]).then((responseArr) => {
            setData(responseArr)
        });
     };
    fetchData();
}, []);
Run Code Online (Sandbox Code Playgroud)

我想扩展 fetchData 函数,所以基本上它只会发送 50 个 IP 并等待迭代完成。

当迭代完成后,接下来的 50 次将被执行。

谢谢

javascript promise reactjs axios

5
推荐指数
1
解决办法
580
查看次数

将ArrayList转换为String

我有一个ArrayList,我需要将其转换为一个字符串.

String中的每个值都在标记内,并用逗号分隔,如下所示:

ArrayList list = [a,b,c]

String s = " ’a’,’b’,’c’ ";
Run Code Online (Sandbox Code Playgroud)

我正在寻找有效的解决方案.

java list

4
推荐指数
1
解决办法
7907
查看次数

通过js禁用按钮

我需要在文本输入值长度小于3的情况下禁用按钮.

我试图使用js但按钮没有被禁用它只是改变颜色

 <p:autoComplete id="ac"
                    value="#{bean.selectedNetCode}" 
                    completeMethod="#{bean.complete}"
                    maxlength="3"
                    size="3"
                    maxResults="10"
                    onkeyup="checkLength(this.value)">
        <p:ajax event="itemSelect" update="genButton" listener="#{bean.handleNetCodeChange}"/>
    </p:autoComplete> 



 function checkLength(value){
      if(value.length <= 2){
      document.getElementById("genButton").disabled = true;
 }
Run Code Online (Sandbox Code Playgroud)

知道为什么吗?

谢谢

primefaces jsf-2

3
推荐指数
1
解决办法
4595
查看次数

如何使用 j_security_check jsf

我想使用 j_security_check 身份验证来验证用户凭据。

基本上我想要实现的是,当用户按下提交时,如果他使用错误的凭据,则会显示一条消息 (p:growl),如果成功,则对话框将关闭。

网上有很多例子,但不幸的是我仍然无法理解如何完成这个难题:(

在我的项目中,我使用的是 primefaces 4.0 和 weblogic 10.3.2.0 (JAVA EE 5)。

一些代码示例:

<p:dialog id="dialog" widgetVar="dlg" resizable="false"> 
    <h:form id="fLogin" prependId="false"
            onsubmit="document.getElementById('fLogin').action = 'j_security_check';">        
        <h:panelGrid columns="2" cellpadding="5">  
            <h:outputLabel for="j_username" value="Username:" />  
            <p:inputText value="#{expBean.username}"   
                         id="j_username" label="username"/>  
            <h:outputLabel for="j_password" value="Password:" />  
            <h:inputSecret value="#{expBean.password}"   
                           id="j_password" label="password"/>  
            <p:commandButton id="submitButton" 
                             value="Submit"
                             actionListener="#{expBean.run}" /> 
        </h:panelGrid> 
    </h:form>
</p:dialog>
Run Code Online (Sandbox Code Playgroud)

网页.xml

<servlet-mapping>
    <servlet-name>Faces Servlet</servlet-name>
    <url-pattern>/faces/*</url-pattern>
    <url-pattern>*.jsf</url-pattern>
</servlet-mapping>
<security-constraint>
    <web-resource-collection>
        <web-resource-name>main</web-resource-name>
        <description/>
        <url-pattern>main.jsf</url-pattern>
        <http-method>POST</http-method>
    </web-resource-collection>
</security-constraint>
<login-config>
    <auth-method>BASIC</auth-method>
    <realm-name>my-realm</realm-name>
</login-config>
<security-role>
    <description/>
    <role-name>MyRole</role-name>
</security-role>
Run Code Online (Sandbox Code Playgroud)

exeBean:

   public void run() …
Run Code Online (Sandbox Code Playgroud)

j-security-check primefaces jsf-2

3
推荐指数
1
解决办法
7733
查看次数

&lt;Tab&gt; 组件内的自定义图标

如何在“@material-ui/core/Tab”组件中使用自定义图标?

      <Tabs
          value={value}
          onChange={handleChange}
          scrollButtons="on"
          indicatorColor="primary"
          textColor="primary">
          <Tab label="Story" icon={ ???? public/icon/hammer.png" />} />
          <Tab label="Insperation" icon={<FavoriteIcon />} />
     </Tabs>
Run Code Online (Sandbox Code Playgroud)

谢谢

material-ui

2
推荐指数
1
解决办法
2128
查看次数