如何在reactjs中同时使用"event.target.value“和"event.target.checked”？
在React.js中，可以通过使用状态（state）来同时获取"event.target.value"和"event.target.checked"的值。
首先，在组件的构造函数中初始化一个状态变量，例如：
constructor(props) {
super(props);
this.state = {
inputValue: '',
isChecked: false
};
}然后，在相应的表单元素上设置事件处理函数，例如：
<input type="text" value={this.state.inputValue} onChange={this.handleInputChange} />
<input type="checkbox" checked={this.state.isChecked} onChange={this.handleCheckboxChange} />接下来，实现对应的事件处理函数，分别更新状态变量的值：
handleInputChange = (event) => {
this.setState({ inputValue: event.target.value });
}
handleCheckboxChange = (event) => {
this.setState({ isChecked: event.target.checked });
}通过上述代码，当文本框的值改变时，"event.target.value"会更新到状态变量"inputValue"中；当复选框的选中状态改变时，"event.target.checked"会更新到状态变量"isChecked"中。
这样，你就可以在React.js中同时使用"event.target.value"和"event.target.checked"了。
注意：以上代码示例中没有提及具体的腾讯云产品，因为与问题无关。
相关·内容
我现在如何才能将所有字段的值放在一起，我一次只能输入一个，如下例所示： this.setState({ [event.target.name]: event.target.value});};
我不能同时使用这两个。
浏览 50提问于2021-05-26得票数 0
回答已采纳
在ReactJS中，我成功地将道具从父组件传递到子组件，但是当调用回调函数时，我注意到
if(event.target.type === 'checkbox') { this.setState({
浏览 7提问于2017-09-08得票数 1
回答已采纳
我有一个自定义输入组件，如下所示：...</select><mycomponent @change="someMethod"></mycomponent>
<
浏览 1提问于2018-05-06得票数 0
回答已采纳
使用此代码： this.setState({ [event.target.id]: event.target.value我意识到我可以使用第二个例子，但我有其他代码，如： if (event.target.type == 'checkbox') {this.setState({ [event.target.id]: <em
浏览 0提问于2018-06-06得票数 2
回答已采纳
这是我的手柄改变法 const { purchase } = this.state; this.setState({ purchase }); };
浏览 3提问于2020-05-03得票数 0
回答已采纳
我正在使用react-redux和django创建一个音乐web应用程序，我有一个返回单个播放列表的函数，它返回html响应，而不是json，我知道当这两个应用程序分开时，它可以正常工作，但当iam使用django routs作为我的主要路由，并且只使用下面这行代码就像一个接口一样反应时： urlpatterns += re_path(r'', TemplateView.as_view(template_name
浏览 35提问于2020-09-27得票数 0
我从后端获取数据，并将其显示在reactjs前端。我有一个表单，我们在输入中输入一些字符串，然后它显示输出。我每次都要刷新页面来显示新的数据。在输入submit按钮后，我希望将状态设置为null。如何在单击submit按钮并同时显示输出后将状态设置为null。const [endP, setEndP] = useState(null);
setMyData(event.target.value</em
浏览 1提问于2020-10-02得票数 0
回答已采纳
2回答
preferences">
<label><input type="checkbox" value="{{preference.id}}" (change)="preferencesStates[i]=$event.target.value
浏览 4提问于2017-06-10得票数 1
回答已采纳
我们完全迷失了React中的复选框。 我们的字段：RGPD和ChaterAcceptance的复选框，当我们在数据库中发布时，不要接受布尔更改。是否有人可以帮助我们解决我们的问题，我们已经做了一些测试和搜索，但如果您的知识可以帮助我们，那就太好了。
浏览 11提问于2020-03-27得票数 0
回答已采纳
1回答
我正在调用一个函数，点击输入复选框并传递它的状态"($event.target.checked)“作为参数之一。但我所收到的只是“未定义”。案例1：">div>“
浏览 0提问于2019-05-29得票数 2
2回答
我在ReactJS中有一个非常简单的POST表单。我在表单name和description中有两个字段。表单提交，但我的问题是它将description的值同时提交到name和description字段。, description: event.target.value }); event.preventDefault();className="button" type="submit"
浏览 23提问于2019-01-25得票数 0
回答已采纳
2回答
我有一个复选框组件，我希望我的用户能够检查多个项，然后将要保存在状态中的项作为数组保存。eventFormats: [] this.setState({[input]: event.target.value
浏览 2提问于2021-02-06得票数 0
回答已采纳
1回答
如何在reactjs中的button onclick事件中触发另一个按钮的click事件？
我想渲染html和下载为excel文件，同时点击按钮事件。我使用react-workbook导出excel文件。
浏览 1提问于2019-07-16得票数 0
我现在有一个带有select下拉列表的，在这个表单中，我映射了一个对象数组，并将name字段显示为每个选项。我目前已经将选项的值属性设置为对象的名称(cpuParent.name)。有什么方法可以同时从同一个下拉字段获取对象的名称和瓦特值吗？我已经复制并粘贴了下面代码的相关片段--该组件是一个类组件：constructor(props) { calculator: {
浏览 1提问于2020-03-29得票数 0
回答已采纳
2回答
function crewChecked(event){ names.push(event.target.value) for(let i = 0; i < names.length;i++){
if(names[i] == event.target.value
浏览 5提问于2021-07-20得票数 0
回答已采纳
在学习reactjs和firebase的同时制作网站 我对reactjs和firebase非常陌生。我认为学习它们的最好方法是在学习them.Here的同时做一个项目，我的问题是如何在reactjs中使用下面的javascript部分。
浏览 4提问于2019-04-05得票数 1
回答已采纳
3回答
我正在做一个组件，它是一个复选框的包装器(我做过类似于'text‘和’number‘类型的输入)，但是我不能让我的传入值正确绑定。$emit('input', event.target.value) }, return this.errors.length:errors="this.errors.ShowInCalendar"></check-edit> 我的模型在数据中，属性ShowInC
浏览 36提问于2019-03-01得票数 3
对于reactjs，我是新手，我想知道是否有一种方法来检查状态值是否是reactjs中的datetime。在单击复选框时，我将其状态设置为当前日期和时间。但是它的值并不是更新，这意味着在单击submit按钮之后，即使用户选中它，它也不会更新checkbox....the复选框。如何检查变量的值是否为datetime。some_value.property : null,}
this.
浏览 1提问于2019-02-10得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
