Forum Discussion

kiyaan0712's avatar
kiyaan0712
Copper Contributor
May 12, 2020

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 writte...
  • VikasJha's avatar
    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

Resources