更改输入字段的值 - React答案

【问题标题】：Changing the value of input field - React更改输入字段的值 - React
【发布时间】：2017-06-15 07:20:47
【问题描述】：

在从 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>

我在选择项目后安慰了元素变量，以检查一切正常，似乎没有问题。

这是控制台日志；

如您所见，值已成功放置，但在屏幕上，输入字段没有任何反应。

【问题讨论】：

因为组件没有重新渲染> 使用状态成员并将其传递给输入。您还需要监听输入更改以相应地更新您的状态

标签： javascript html reactjs input-field

【解决方案1】：

设置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() 强制重新渲染组件。

【讨论】：