none
Textbox control read only not able to edit in react JS SPFX webpart RRS feed

  • Question

  • I want to update the value in textbox control in reactJS SPFX webpart.

    But when i am trying to modify its in readonly mode.

    How can we edit the textbox control.

    My code:

    =======================================================

    import * as React from 'react';
    import styles from './Edt.module.scss';
    import { IEdtProps } from './IEdtProps';
    import { escape } from '@microsoft/sp-lodash-subset';
    export interface IEdtState{
    "descriptionName":""
    }
    export default class Edt extends React.Component<IEdtProps, IEdtState> {
    public constructor(props: IEdtProps, state: IEdtState){
    super(props);
    var self = this;
    this.state = {
    descriptionName:""
    };
    }
    public OnchangeBuilding(event: any): void {
    this.setState({ descriptionName: event.target.value });
    //alert(this.state.descriptionName);
    }
    public render(): JSX.Element {
    return (
    <div >
    <input type="text" value= "Raj" onChange={this.OnchangeBuilding.bind(this)}/>
    </div>
    );
    }
    }

    ====================================================

    UI:

    ====================================

    ======================================

    I am not able to modify the text in above control

    Tuesday, October 15, 2019 10:29 AM

Answers

  • Hi Rajesh,

    Any update? Did you solve this issue?

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    Monday, October 21, 2019 9:09 AM
    Moderator

All replies

  • Remove value="Raj"

    Please remember to up-vote & mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    Tuesday, October 15, 2019 10:51 AM
  • If i remove "Raj" how can i bind?

    I want to get the data from list item and bind the particular filed to textbox control if i remove the value i cant bind the value

    Tuesday, October 15, 2019 10:54 AM
  • try this

    <input
    type="text"
    defaultvalue= {this.state.descriptionName}
    onChange={this.OnchangeBuilding.bind(this)}/>


    Thanks


    Please remember to up-vote & mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.


    • Edited by HarshalGite Tuesday, October 15, 2019 11:31 AM
    • Proposed as answer by HarshalGite Tuesday, October 15, 2019 12:00 PM
    Tuesday, October 15, 2019 10:59 AM
  • But where can i use this :

    this.setState({ 'descriptionName': valueFromList})

    I am using in render:

    <input type="text" id="txtEmpmail" value={item.Description} onChange={self.OnchangeBuilding.bind(self)}/>

     OnchangeEvent:

    public OnchangeBuilding(event: any): void {
    this.setState({ descriptionName: event.target.value });
    alert(this.state.descriptionName);
    }

    If i want to modify the textbox value its showing in readonly.

    Tuesday, October 15, 2019 11:06 AM
  • check the updated answer above


    Please remember to up-vote & mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    Tuesday, October 15, 2019 11:31 AM
  • Yes i used defaultValue previoulsy its working fine but i just want to know whats the difference between 'defaultValue' and 'value'. Is there any disadvantage if i use 'defaultValue'?
    Tuesday, October 15, 2019 11:43 AM
  • It is related to controlled and uncontrolled elements in react. Please read the following articles for better understanding with examples.

    https://scriptverse.academy/tutorials/reactjs-defaultvalue-value.html

    https://scriptverse.academy/tutorials/reactjs-defaultvalue-value.html

    Thanks. Please up-vote and mark as answer if it helped.


    Please remember to up-vote & mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    • Proposed as answer by HarshalGite Tuesday, October 15, 2019 12:00 PM
    Tuesday, October 15, 2019 11:59 AM
  • Is it ok i can use defaultValue for textbox?
    Tuesday, October 15, 2019 12:02 PM
  • Hi Rajesh,

    Yes, as HarshalGite's reply, please use defaultValue to instead of the Value of Input text.

    The difference between the defaultValue and value property, is that defaultValue contains the default value, while value contains the current value after some changes have been made. If there are no changes, defaultValue and value is the same.

    The defaultValue property is useful when you want to find out whether the contents of a text field have been changed. 

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    Wednesday, October 16, 2019 5:19 AM
    Moderator
  • Hi Rajesh,

    Any update? Did you solve this issue?

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    Monday, October 21, 2019 9:09 AM
    Moderator