javascript - 无法获取数据列表的选定值
问题描述
我有一个数据列表,并试图获取单击按钮时当前选择的值。我完全按照 Stack Overflow 上其他帖子的建议进行了操作,但它似乎不起作用。在我的代码中,您可以看到我尝试过的内容。它只是不断注销未定义。当我记录长度时,它会正确注销有 5 个选项这是我的 HTML 代码
<form>
<input list="slots" name="slot"></input>
<datalist id="slots">
{
this.state.slots.map((slot) => <option value={slot.id} >{slot.start_time} - {slot.end_time}</option>)
}
</datalist>
<Button onClick={() => {this.handleAddFacilitator()}}>Submit</Button>
</form>
这是方法:
handleAddFacilitator(e) {
console.log($('#slots').val(), "slotID")
console.log(document.getElementById('slots').value, "second slot")
console.log(document.getElementById("slots").options.length, "LENGTH")
}
解决方案
假设您有一个选择参考类型
<select ref="slotType">
<option value="01">one</option>
<option value="02">two</option>
<option value="03">three</option>
</select>
您的按钮条目
<Button onClick={this.handleAddFacilitator}>Submit</Button>
handleAddFacilitator() {
if (this.refs.slotType) {
console.log("selected option ==>",this.refs.imageType.value);
}
}
另一种方式 :
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
value: 'PNG'
};
this.handleChange = this.handleChange.bind(this);
this.print = this.print.bind(this);
}
print() {
if (this.state.value) {
console.log(this.state.value);
}
}
handleChange(e) {
this.setState({ value: e.target.value });
}
render() {
return (
<div>
<select ref="slotType" onChange={this.handleChange}>
<option value="01">one</option>
<option value="02">two</option>
<option value="03">three</option>
</select>
<Button onClick={this.print}>Submit</Button>
</div
);
}
}
推荐阅读
- flutter - 飞镖中的乘法表
- wordpress - 如何在插件中覆盖 WooCommerce 自定义分类术语存档模板
- express - 如何捕获“FilesInterceptor”装饰器抛出的错误
- python - 问题编程 Python 用于限位开关项目,如何使用 GPIO.cleanup()?
- git - 错误:致命:不是 git 存储库(或任何父目录):.git 云源存储库
- c++ - 如何使用 WASAPI 技术播放 16BitPCM
- python - 创建一个以开始值和结束值作为键的 Python 字典
- python - 根据列唯一值对组执行多元线性回归
- ionic-framework - 用于租户应用程序的 Ionic 5 Custom Webpack 无法正确观看文件
- reactjs - 如何在 React.createElement 方法中传递 *dynamic* 道具?