我正在将动态值添加到输入文件中,然后我尝试编辑它,但它根本不可编辑。
var shop_profile_data = this.state.data.DETAILS;
<input id="shopname" className="inputMaterial" value={shop_profile_data.NAME} type="text" required/>
请给我解决方案。谢谢
由于value
总是以相同的值(shop_profile_data.NAME
)呈现,因此无法改变。通过设置value
属性,您将使input
成为受控组件。
您需要添加onChange
事件,然后将shop_profile_data.NAME
设置为其他值。那么input
的价值将会改变。
如果您只想设置input
的初始值,请使用defaultValue
属性(docs)。 defaultValue
将设置初始值,但随后允许更改该值。
有关Controlled vs Uncontrolled Components的更多信息,请参阅。
下面的代码显示了我们如何在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'));
尝试使用defaultValue
而不是value
,defaultValue
将设置值并且也可编辑。代码如下所示:
<input id="shopname" className="inputMaterial" defaultValue={shop_profile_data.NAME} type="text" required/>