这看起来很简单,但我没有找到答案。
我有一个基本的标记,它包含许多基本的
标记。到目前为止还不错。我已经通过在select标记上添加一个侦听器
onchange
来启动React组件,这很好地工作。
但这并不能真正解决我的忧虑。只有当选项的值与选择的值不相同时,才会触发onchange
。我希望只要选择了任何选项,我的函数就会被触发,即使的值没有改变,我也希望知道用户选择了一些东西并重新触发整个处理。所以
onchange
可能不是我想要使用的,但我没有找到该使用什么。
有一个基本的select标记和一些选项在里面,这是可能的吗?如果不是,实现这一目标的最佳方法可能是什么?(我懒惰的手指宁愿实现一个自定义的React下拉列表,仅作为最后的手段)。
谢谢你们!
在这里,一般的惯例是,当用户选择了所选值以外的其他值时,我们希望执行一些操作,因为对现有值的处理已经完成了。
但是如果您仍然希望执行前面提到的操作,则可以简单地将onclick
处理程序添加到标记中。现在,它将做的是在用户每次单击任何选项时激发事件。
请查看以下内容
null
const handleChange = (obj) => {
alert(`User changed value to ${obj.value}`);
};
const handleClick = (obj) => {
alert(`User clicked on ${obj.value}`);
};
body {
margin: 0;
}
section {
display: grid;
place-content: center;
height: 100vh;
}
section select {
padding: 0.5em 1em;
font-size: 1.5em;
background-color: tomato;
}
<section>
<select onchange="handleChange(this)" onclick="handleClick(this)">
<option value="Monday">Monday</option>
<option value="Tuesday">Tuesday</option>
<option value="Wednesday">Wednesday</option>
<option value="Thursday">Thursday</option>
<option value="Friday">Friday</option>
<option value="Saturday">Saturday</option>
<option value="Sunday">Sunday</option>
</select>
</section>