reactjs - React Checkbox onCheck 获取键值

标签 reactjs checkbox event-handling onchange semantic-ui

我目前正在使用 React 构建一个网站,但无法从 onChange 事件中获取 Checkbox 键值。这就是我的代码的样子:

handleChange = (e) => {
    console.log('it works');
    console.log(e.target.key);
}

还有我的复选框代码:

<Table.Cell><Checkbox key={singleNews.key} name="myCheckBox1" onChange={this.handleChange}/></Table.Cell>

它只是打印出“它有效”和“未定义”。我还在构造函数中使用了 'this.handleChange = this.handleChange.bind(this) 。谁能帮我找出可能是什么错误吗?作为记录;我目前正在使用 Semantic UI React 框架 - 这可能是问题所在吗?

提前致谢。

最佳答案

首先,react 中的关键属性是一个特殊的 prop,不应该是 accessed by your app and treated as internal to react

如果您不尝试使用该 key 执行任何操作,而只是尝试从 this issue thread 获取更新的数据应该可以像这样访问事件处理程序中的值:

handleChange = (e, data) => {
    console.log('it works');
    console.log(data.value);
}

如果您想根据运行时收到的数据将数据传递到事件处理程序中,那么您可以将复选框代码更改为:

<Table.Cell>
    <Checkbox name="myCheckBox1" onChange={(e, data) => this.handleChange(singleNews.key, data.value)}/>
</Table.Cell>

以及您对此的更改处理程序

handleChange = (key, value) => {
    console.log('here\'s the key', key);
    console.log('and the value', value);
}

关于reactjs - React Checkbox onCheck 获取键值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48753802/

相关文章:

javascript - 生成缩略图并上传到 Node 中的 s3 存储桶的最佳方法是什么?

reactjs - NextJS htaccess 设置,URL 上不带尾部斜杠

javascript - typescript react /还原

javascript - 检查复选框是否被选中然后发送

javascript - Ember select - 在页面加载良好时调用选择事件

c# - PropertyChangedEvent 多次触发

javascript - 从 React Hook useEffect 内部对 'timeInterval' 变量的赋值将在每次渲染后丢失

javascript - 无法清除 Jquery 中的所有复选框

html - Jade 不呈现复选框文本?

java - 如何实现 JTable 单元格更改的事件处理程序