英文:
How do I detect a change in a select element in React?
问题
我有一个包含select下拉框的HTML表单，供用户选择颜色，我正在尝试检测何时选择了新颜色。我已经添加了onchange属性，并附加了一个console.log()函数，但当我选择新颜色时，控制台没有输出任何内容。
这是我的select元素，它包含在表单的return语句中：
<select id="color-selector"
name="colors"
onchange={() => console.log("颜色已更改")}>
<option value="red">红色</option>
<option value="green">绿色</option>
<option value="blue">蓝色</option>
<option value="yellow">黄色</option>
<option value="orange">橙色</option>
<option value="purple">紫色</option>
</select>
我看到这在纯JS中是可能的，来自这个问题，但是否有办法在React中使用HTML的onchange属性来实现这一点？
英文:
I have an HTML form with a select dropdown for users to select a color, and I'm trying to detect when a new color has been selected. I've added the onchange attribute with a console.log() function, but nothing is printed to console when I select a new color.
Here's my select element which is contained in the return statement for the form:
<select id="color-selector"
name="colors"
onchange={() => console.log("Color has changed")}>
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
<option value="yellow">Yellow</option>
<option value="orange">Orange</option>
<option value="purple">Purple</option>
</select>
I've seen this is possible in vanilla JS from this question, but is there a way to do this by using the onchange attribute in the HTML in React?
答案1
得分: 1
import React, {
FormEvent,
FormEventHandler,
SelectHTMLAttributes,
useState,
} from "react";
export default function Home() {
const [color, setColor] = useState("");
function colorChange(e) {
setColor(e.target.value);
console.log(e.target.value);
}
return (
<div>
<select name="color" id="color" value={color} onChange={colorChange}>
<option value="">选择选项</option>
<option value="red">红色</option>
<option value="blue">蓝色</option>
<option value="green">绿色</option>
</select>
</div>
);
}
英文:
import React, {
FormEvent,
FormEventHandler,
SelectHTMLAttributes,
useState,
} from "react";
export default function Home() {
const [color, setColor] = useState("");
function colorChange(e) {
setColor(e.target.value);
console.log(e.target.value);
}
return (
<div>
<select name="color" id="color" value={color} onChange={colorChange}>
<option value="">Select option</option>
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
</select>
</div>
);
}
答案2
得分: 1
你拼错了 onChange。在 Reactjs 中，所有的回调函数都是以驼峰命名法编写的。在简单的 HTML 中，属性名是 onchange。
英文:
You've misspelled onChange. All callbacks in Reactjs are written in camel-case. It's in simple HTML that the attribute is onchange.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论