反應輸入類型不可編輯

Question

我在輸入文件中添加了動態值，然後我嘗試編輯它，但它根本不可編輯。

var shop_profile_data = this.state.data.DETAILS; 

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

請給我解決方案。謝謝

Answer 1

由於value始終呈現相同的值（shop_profile_data.NAME）沒有什麼能夠改變。通過設置value屬性，您正在使input成爲受控組件。

您需要添加onChange事件，然後將shop_profile_data.NAME設置爲不同的值。然後input的值將改變。

如果您只想設置input的初始值，請使用defaultValue屬性（docs）。 defaultValue將設置初始值，但隨後允許更改該值。

欲瞭解更多有關Controlled vs Uncontrolled Components。

Answer 2

下面的代碼顯示了我們如何使reactjs中的輸入標籤可編輯。

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'));