react输入类型不可编辑

IT技术 reactjs
2021-04-10 13:11:04

我在react中向输入文件添加动态值,然后我尝试编辑它,但它根本不可编辑。

var shop_profile_data = this.state.data.DETAILS;

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

请给我解决方案。谢谢

3个回答

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

您需要添加一个onChange事件,然后将 设置shop_profile_data.NAME为不同的值。那么 的值input就会改变。

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

有关受控与非受控组件的更多信息

SHOP_NAME?我以为这只是名字?
2021-05-28 13:11:04
defaultValue={shop_profile_data.NAME} 抱歉,这只是名称
2021-06-02 13:11:04
注意事项:defaultValue 会导致奇怪的、难以追踪的错误;并且它不允许您根据输入的当前值进行渲染,或者在获得新数据时更新该值。
2021-06-18 13:11:04
但是如果我设置 defaultValue={shop_profile_data.SHOP_NAME} 它只显示为空
2021-06-19 13:11:04

尝试使用defaultValue代替valuedefaultValue将设置值并且也可编辑。代码如下所示:

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

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

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