SOLVED

Need help in SPFx -React Solution.

%3CLINGO-SUB%20id%3D%22lingo-sub-1382276%22%20slang%3D%22en-US%22%3ENeed%20help%20in%20SPFx%20-React%20Solution.%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1382276%22%20slang%3D%22en-US%22%3E%3CP%3EHello%20Experts%20%2C%3C%2FP%3E%3CP%3EI%20am%20new%20in%20learning%20of%20SPFx%20react.%20I%20have%20following%20scenario%3A%3C%2FP%3E%3CP%3Ewhen%20a%20label%20value%20is%20equal%20to%20Text%20Field%20value%2C%20a%20button%20should%20be%20disabled%20else%20should%20be%20enabled.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20have%20written%20below%20code.%20but%20It%20is%20running%20when%20I%20clicked%20on%20button.%20But%20I%20want%20when%20Text%20Field%20value%20is%20equal%20to%20Label%20value%20the%20button%20should%20be%20disabled%20on%20runtime.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EPlease%20help%2Fcorrect%20my%20code.%20Thanks%20in%20advance.%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22SPFx.jpg%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F190900iA44DEB7805D8F284%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20title%3D%22SPFx.jpg%22%20alt%3D%22SPFx.jpg%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3Eand%20the%20code%20is%3A%3C%2FP%3E%3CDIV%20class%3D%22mceNonEditable%20lia-copypaste-placeholder%22%3E%26nbsp%3B%3C%2FDIV%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22SPFxCode.jpg%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F190899i6C71F196E256795B%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20title%3D%22SPFxCode.jpg%22%20alt%3D%22SPFxCode.jpg%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-1382276%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3EDeveloper%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3EPnP%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1385014%22%20slang%3D%22en-US%22%3ERe%3A%20Need%20help%20in%20SPFx%20-React%20Solution.%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1385014%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F658248%22%20target%3D%22_blank%22%3E%40kiyaan0712%3C%2FA%3E%26nbsp%3B%3C%2FP%3E%3CP%3Eyou%20can%20call%20the%20function%20handleclick%20on%20text%20Field.%3CBR%20%2F%3EonChanged%20%3D%20%7Bthis.handleclick%20%7D%3CBR%20%2F%3Eand%20then%20in%20function%20u%20just%20setstate%20of%20User%20text%20before%20line%20no%2024.%20I%20think%20that%20should%20work.%20Done%20forget%20to%20remove%20onClick%20on%20button.%3CBR%20%2F%3E%3CBR%20%2F%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1385024%22%20slang%3D%22en-US%22%3ERe%3A%20Need%20help%20in%20SPFx%20-React%20Solution.%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1385024%22%20slang%3D%22en-US%22%3EI%20have%20checked%20with%20that%20one%20but%20it%20didn't%20work.%20When%20I%20was%20typing%20something%20in%20textfield%20all%20page%20goes%20blank.%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1385295%22%20slang%3D%22en-US%22%3ERe%3A%20Need%20help%20in%20SPFx%20-React%20Solution.%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1385295%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F658248%22%20target%3D%22_blank%22%3E%40kiyaan0712%3C%2FA%3E%26nbsp%3B%3C%2FP%3E%3CP%3EHey%20Replace%20your%20code%20with%20below%20code%3C%2FP%3E%3CPRE%20class%3D%22lia-code-sample%20language-javascript%22%3E%3CCODE%3Eimport%20*%20as%20React%20from%20'react'%3B%0Aimport%20%7B%20TextField%2C%20MaskedTextField%20%7D%20from%20'office-ui-fabric-react%2Flib%2FTextField'%3B%0Aimport%20%7B%20Label%20%7D%20from%20'office-ui-fabric-react%2Flib%2FLabel'%3B%0Aimport%20%7B%20DefaultButton%2C%20PrimaryButton%20%7D%20from%20'office-ui-fabric-react'%3B%20%0A%0Aexport%20interface%20ICustomComponentProps%20%7B%0A%20%20description%3A%20string%3B%0A%20%20%7D%0Aexport%20interface%20ICustomComponentState%20%7B%20%20%0A%20%20userText%3A%20string%3B%0A%20%20disabled%3F%3A%20boolean%3B%0A%20%20checked%3F%3A%20boolean%3B%0A%7D%20%0Aexport%20default%20class%20MyFirstCompo%20extends%20React.Component%3CICUSTOMCOMPONENTPROPS%3E%20%7B%0Aconstructor(props%3A%20ICustomComponentProps%2C%20state%3A%20ICustomComponentState)%7B%0A%20%20super(props)%3B%0A%20%20this.state%20%3D%20%7B%0A%20%20userText%3A%20%22%22%2C%0A%20%20disabled%3A%20false%0A%20%20%7D%3B%0A%20%20this.handleClick%3Dthis.handleClick.bind(this)%3B%20%0A%7D%0Apublic%20handleClick(e)%20%7B%0A%20%20%20%20this.setState(%7B%0A%20%20%20%20%20%20%20%20userText%20%3A%20e%0A%20%20%20%20%7D)%3B%0A%20%20%7D%0A%0Apublic%20render()%3A%20React.ReactElement%3CICUSTOMCOMPONENTPROPS%3E%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%3CREACT.FRAGMENT%3E%0A%20%20%20%20%20%20%3CDIV%3E%0A%20%20%20%20%20%20%20%20%3CH3%20id%3D%22toc-hId-1146258489%22%20id%3D%22toc-hId-1146258489%22%3ECustom%20Component!!!%3C%2FH3%3E%0A%20%20%20%20%20%20%20%20%3CLABEL%3E%7Bthis.props.description%7D%3C%2FLABEL%3E%3CBR%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CTEXTFIELD%20value%3D%22%7Bthis.state.userText%7D%22%20onchanged%3D%22%7Bthis.handleClick%7D%22%20label%3D%22Type%20String%20Below%3A%22%3E%3C%2FTEXTFIELD%3E%3CBR%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CPRIMARYBUTTON%20text%3D%22Button%22%20disabled%3D%22%7B%22%20this.props.description%3D%22%3D%22%20this.state.usertext%3D%22%22%3E%3C%2FPRIMARYBUTTON%3E%0A%20%20%20%20%20%20%3C%2FDIV%3E%0A%20%20%20%20%20%20%3CDIV%3E%7Bthis.state.userText%7D%3C%2FDIV%3E%20%20%20%20%20%20%0A%20%20%20%20%20%20%3C%2FREACT.FRAGMENT%3E%0A%20%20%20%20)%3B%0A%20%20%20%20%0A%20%20%7D%0A%7D%0A%20%3C%2FICUSTOMCOMPONENTPROPS%3E%3C%2FICUSTOMCOMPONENTPROPS%3E%3C%2FCODE%3E%3C%2FPRE%3E%3CP%3E%26nbsp%3BPlease%20let%20me%20know%20your%20response%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1385869%22%20slang%3D%22en-US%22%3ERe%3A%20Need%20help%20in%20SPFx%20-React%20Solution.%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1385869%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F665766%22%20target%3D%22_blank%22%3E%40VikasJha%3C%2FA%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThanks%20for%20the%20help.%20The%20code%20is%20given%20by%20you%2C%20is%20working%20like%20charm.%20You%20saved%20my%20days.%3C%2FP%3E%3C%2FLINGO-BODY%3E
Highlighted
New Contributor

Hello Experts ,

I am new in learning of SPFx react. I have following scenario:

when a label value is equal to Text Field value, a button should be disabled else should be enabled.

 

I have written below code. but It is running when I clicked on button. But I want when Text Field value is equal to Label value the button should be disabled on runtime.

 

Please help/correct my code. Thanks in advance.

SPFx.jpg

and the code is:

 

SPFxCode.jpg

 

4 Replies
Highlighted

@kiyaan0712 

you can call the function handleclick on text Field.
onChanged = {this.handleclick }
and then in function u just setstate of User text before line no 24. I think that should work. Done forget to remove onClick on button.

Highlighted
I have checked with that one but it didn't work. When I was typing something in textfield all page goes blank.
Highlighted
Solution

@kiyaan0712 

Hey Replace your code with below code

import * as React from 'react';
import { TextField, MaskedTextField } from 'office-ui-fabric-react/lib/TextField';
import { Label } from 'office-ui-fabric-react/lib/Label';
import { DefaultButton, PrimaryButton } from 'office-ui-fabric-react'; 

export interface ICustomComponentProps {
  description: string;
  }
export interface ICustomComponentState {  
  userText: string;
  disabled?: boolean;
  checked?: boolean;
} 
export default class MyFirstCompo extends React.Component<ICustomComponentProps, ICustomComponentState> {
constructor(props: ICustomComponentProps, state: ICustomComponentState){
  super(props);
  this.state = {
  userText: "",
  disabled: false
  };
  this.handleClick=this.handleClick.bind(this); 
}
public handleClick(e) {
    this.setState({
        userText : e
    });
  }

public render(): React.ReactElement<ICustomComponentProps> {
    return (
      <React.Fragment>
      <div>
        <h3>Custom Component!!!</h3>
        <Label>{this.props.description}</Label><br></br>
        <TextField value={this.state.userText} onChanged={this.handleClick} label="Type String Below:" ></TextField><br></br>
        <PrimaryButton text="Button" disabled={ this.props.description == this.state.userText? true:false}/>
      </div>
      <div>{this.state.userText}</div>      
      </React.Fragment>
    );
    
  }
}
 

 Please let me know your response

Highlighted

@VikasJha 

 

Thanks for the help. The code is given by you, is working like charm. You saved my days.