反应输入类型不可编辑答案

【问题标题】：React Input Type not editable反应输入类型不可编辑
【发布时间】：2016-03-17 17:21:41
【问题描述】：

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

var shop_profile_data = this.state.data.DETAILS;

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

请给我解决方案。谢谢

【问题讨论】：

标签： reactjs

【解决方案1】：

由于 value 总是以相同的值 (shop_profile_data.NAME) 呈现，因此无法更改。通过设置value 属性，您正在使input 成为受控组件。

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

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

更多信息请阅读Controlled vs Uncontrolled Components。

【讨论】：

但如果我设置 defaultValue={shop_profile_data.SHOP_NAME} 它只显示 null
SHOP_NAME？我以为这只是名字？
defaultValue={shop_profile_data.NAME} 抱歉，这只是名称
警告：defaultValue 会导致奇怪、难以追踪、错误；并且它不允许您根据输入的当前值进行渲染，或者在您获得新数据时更新该值。

【解决方案2】：

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

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

参考：Uncontrolled Components – React

【讨论】：

【解决方案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'));

【讨论】：

【解决方案4】：

<input className="form-control" type="text" placeholder="Your Location" value={<Location/>}

其给予对象对象

【讨论】：

正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。