React input type not editable

Question

I added dynamic values ​​to the input file in the reaction, then I tried to edit it, but it was not edited at all.

var shop_profile_data = this.state.data.DETAILS;

<input id="shopname" className="inputMaterial"  value={shop_profile_data.NAME} type="text" required/>

Please give me a solution. Thanks

Answer 1

Since it is valuealways displayed with the same value ( shop_profile_data.NAME), nothing can change. By setting the property value, you create a inputControlled Component.

You need to add an event onChangeand then set shop_profile_data.NAMEto a different value. Then the value inputwill change.

input, defaultValue (docs). defaultValue , .

.

Answer 2

, , responsejs.

import React from 'react';
import { render } from 'react-dom';

    class App extends React.Component{
      constructor(props){
        super(props);
        this.state = {
          data: 2016
        }  
      }
      _handleChangeEvent(val) {
        return val;
      }
      render(){
        return (
          <div>
            <input type='number' 
                   onChange={()=>{this._handleChangeEvent(this.state.data);}} 
                   defaultValue={this.state.data} />
          </div>
        );
      }
    }

render(<App/>, document.getElementById('app'));