反应状态更新

时间:2020-05-08 12:53:22

标签: javascript reactjs

我正在从用户处获取输入,并检查其输入是否为正确的json格式,或者逻辑是否工作正常。 错误是如果用户正确输入正确的格式或连续输入错误的格式..我的逻辑不起作用,因为我正在用not运算符更新状态。我尝试使用componentWillMount()更新值,但这也无法正常工作。任何帮助将不胜感激。 以下是我的代码:-

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://xmlns.jcp.org/jsf/core">

    <body>

        <ui:composition template="./template/template.xhtml">

            <ui:define name="pageTitle">
              Send Sms
            </ui:define>

            <ui:define name="pagecontent" id="blocker">

                <p:panel id="panel_sms" header="My Contacts">
              <p:blockUI block="panel_sms" id="wds" widgetVar="wds" trigger=":form1:tbl:btn_send_sms"  >
                                <p:graphicImage library="images" value="/img/3.gif"/> 
                                <br/>
                                <h:outputText value="Sending Sms Please wait...    " style="font-weight: bolder"/> 
                            </p:blockUI>


                <h:form id="form1">


                    <p:growl showDetail="true"/>


                    <p:dataTable rowKey="#{item.id}"  paginator="false" 
                                 rows="8"  
                                 editable="true"  widgetVar="table_route"
                                 id="tbl"
                                value="#{model.loadContacts}" var="item" >

                         <p:column style="width: 15%;">
                            <f:facet name="header">
                                <h:outputText value="Customer Name"/>
                            </f:facet>
                            <h:outputText value="#{item.name} "/> 
                        </p:column>
                          <p:column style="width: 15%;">
                    <f:facet name="header">
                                <h:outputText value="Contact"/>
                            </f:facet>
                            <h:outputText value="#{item.contact} "/> 
                        </p:column>                        

                        <p:column headerText="Send Sms"   style="width:8%;align-content: center">  
                            <center>
                                <p:commandButton id="btn_send_sms" update="form1"
                                style="background: #4a148c" value="Send Sms" icon="ui-icon-signal-diag" action="#{model.doLenthyTask(item)}"><--Have simulated a threaad to sleep 5 seconds-->

                                    <p:confirm message="Send Sms?"/>
                                </p:commandButton> 
                            </center>
                     </p:column> 

                    </p:dataTable>


                </h:form>

                               </p:panel>
            </ui:define>

        </ui:composition>

    </body>

1 个答案:

答案 0 :(得分:2)

您无需使用componentWillMount。此外,该API在最新的react版本中已被弃用

在更新状态时,您需要直接设置flag_failflag_button状态,而不能像下面那样切换它们

onSubmitHandler = () => {
    const json = this.state.text;
    if(this.IsJsonString(json))
        this.setState({ flag_button : true, flag_fail: false })
    else
        this.setState({ flag_fail : true, flag_button: false })
}