Need help in SPFx -React Solution.

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.

and the code is:

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

VikasJha

Copper Contributor

May 13, 2020

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

kiyaan0712
Copper Contributor
May 13, 2020
VikasJha

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

VikasJha
Copper Contributor
May 13, 2020
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.
- kiyaan0712
  Copper Contributor
  May 13, 2020
  I have checked with that one but it didn't work. When I was typing something in textfield all page goes blank.

Forum Discussion

Need help in SPFx -React Solution.

Resources