我从从MaterialUI库中选择SelectField 选择项目后,我一直在尝试更改输入字段的值,但我还没有成功,但就我搜索它而言,我写的所有东西看起来都应该是它应该是的。
这是我用来改变价值的东西;
var element = ReactDOM.findDOMNode(this.refs._deviceId);
element.setAttribute('value', 'deneme');
console.log(element);
这是输入字段;
<div className="form-group row">
<label className="col-md-2 control-label">Device ID</label>
<div className="col-md-10">
<input type="text" className="form-control" id="deviceId" placeholder="Device ID" ref="_deviceId" />
</div>
</div>
我在选择项目后安慰了元素变量,以便检查一切正常,似乎没有问题。
这是控制台日志;
如您所见,该值已成功放置,但在屏幕上,输入字段没有任何反应。
答案 0 :(得分:2)
设置value
属性后,需要重新渲染组件。 React仅在检测到状态更改时重新呈现组件。所以请使用状态变量 -
//Declare the state variable
this.state = {
inputValue: ''
};
//Use a lifecycle event or your own method to change the value of that state by using the setState method as-
someMethod() {
this.setState({
inputValue: 'deneme'
});
}
//In HTML use the above state as-
<input type="text" className="form-control" id="deviceId" placeholder="Device ID" ref="_deviceId" value={this.state.inputValue} />
请记住使用 setState 方法更改状态,以便重新呈现组件。
或强>
您可以调用this.forceUpdate()
强制重新渲染组件。