是否可以控制无法控制的输入文本？ - 反应

Question

当用户 select 来自 Material UI 库的 SelectField 下拉菜单中的项目时，我从状态设置输入文本值但是当它设置时，输入文本变得不可更改，我需要的是当

这是图片； （在 select 从 SelectField 下拉菜单中输入一个项目之前）

select从下拉列表中选择一个项目后；

所有填充的输入文本现在都变得不可更改，空的文本仍然可以更改，因为它们没有从状态中获取值。

这是代码；

<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" value={this.state.deviceId} placeholder="Device ID" ref="_deviceId" /> </div> </div>

我的状态；

state = { deviceId: null, };

然后我设置输入文本，当用户 select 从下拉列表中选择一个项目时；

saveDeviceInternal(index, value) { if (this.props.templatesList.length > 0){ let deviceId = value; this.setState({deviceId}); }else{ let deviceId = this.refs._deviceId.value; this.setState({deviceId}); } }

Answer 1

尝试将此方法添加到您的class：

handleChange(e) {
    let deviceId = e.currentTarget.id
    this.setState({deviceId: e.target.value});
  }

并将其添加到您的输入组件中：

<input type="text" className="form-control" onChange={this.handleChange.bind(this)} id="deviceId" value={this.state.deviceId} placeholder="Device ID"  ref="_deviceId" />

是否可以控制无法控制的输入文本？ - 反应

Is it possible to control the uncontrollable input text? - React

javascript

html

reactjs

input-field