反应输入类型不可编辑

Question

我正在将动态值添加到输入文件中,然后我尝试编辑它,但它根本不可编辑.

var shop_profile_data = this.state.data.DETAILS;

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

请给我解决方案.谢谢

Answer 1

尝试使用defaultValue而不是value，defaultValue将设置值并且也可编辑。代码如下所示：

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

参考：不受控制的组件 – React

Answer 2

由于value始终使用相同的值(shop_profile_data.NAME)呈现,因此无法更改.通过设置value属性,您正在制作input受控组件.

您需要添加一个onChange事件,然后将其shop_profile_data.NAME设置为不同的值.那么input意志的价值会发生变化.

如果您只想设置初始值input,请使用defaultValueproperty(docs). defaultValue将设置初始值,但随后允许更改该值.

有关受控组件与非受控组件的更多信息,请参阅.

Answer 3

下面的代码显示了我们如何在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'));