Question

-5

I can't edit Text Field in Material-UI

rated 0 times [ 1] [ 6] / answers: 1 / hits: 40721 / 7 Years ago, fri, september 8, 2017, 12:00:00

I developed a React App using Material-UI then I tried to create independent Components,

check the below independent components(<PanelDiv/>),

render() {

        return (

            <div className=panelDiv-component style={{display:this.props.display}}>

                <div className=panel-field-content>

                    <TextField

                        floatingLabelText={this.props.heading}

                        type={this.props.inputType}

                        value={this.props.value}

                    />

                   {/* <input  defaultValue className=form-control></input>*/}

                </div>

            </div>

        );

    }

I tried to use the component like this,

<PanelDiv

    heading='name'

    inputType=text

    value={this.state.userData.name}

    display={this.state.display[0]}

/>

But I can't update input field in this way.Also there is no error. How can i solve this? I want to update my input field.

Please check my input filed in the below image :

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

allans

Add To Favorites

Follow

Total Points: 336

Total Questions: 120

Total Answers: 119

Location: Peru

Member since Mon, Jun 6, 2022

2 Years ago

allans questions

1 Close a bootstrap modal 5 after asynchronously submitting a form with vue js

Tue, May 11, 21, 00:00, 3 Years ago

1 how to show details page using react router dom

Thu, Mar 25, 21, 00:00, 3 Years ago

1 How to use invisible character to split a text and how to get it's JS representation?

Mon, Nov 30, 20, 00:00, 4 Years ago

1 Checking if am receiving a valid unix timestamp

Fri, Sep 4, 20, 00:00, 4 Years ago

1 How can I get all xhr calls in puppeteer?

Fri, Jun 12, 20, 00:00, 4 Years ago

View All

answered 7 Years ago kamronr · Accepted Answer

Because you are controlling the value of TextField by using value attribute but you are not updating the value by using onChange function, Since value of TextField is not changing so it becomes read only.

Solution:

Specify the onChange function with TextField and update the value inside that, Like this:

<TextField

    floatingLabelText={this.props.heading}

    type={this.props.inputType}

    value={this.props.value}

    onChange={this.props._change}

/>

Inside parent component:

_Change(event, value){

   //update the value here

}





<PanelDiv

    heading='name'

    inputType=text

    value={this.state.userData.name}

    _change={this._change}

    display={this.state.display[0]}

/>