反应复选框打开检查获取键值

Question

我目前正在开发一个使用 React 构建的网站，但我无法从 onChange 事件中获取复选框键值。这是我的代码的样子：

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)。谁能帮我找出错误可能是什么？记录在案;我目前正在使用语义 UI React 框架 - 这可能是问题所在吗？

提前谢谢。

Answer 1

首先，react 中的关键属性是一个特殊的 prop，你的应用不应该访问它，而应该将其视为 react 的内部

属性。如果您没有尝试将键用于任何事情，而只是尝试从此问题线程获取更新的数据，那么应该可以像这样访问事件处理程序中的值：

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);
}

Answer 2

根据semantic-ui-react的文档(这是您根据标签使用的库，对吗？)您获得 2 个参数：event和data。

data是：

所有道具和建议的检查/不确定状态。

所以你的代码应该是这样的：

handleChange = (e, data) => {
console.log('it works');
console.log(data); // the data / props that passed to the component
}

请注意，key是为react保留的，不会传递回处理程序。
不过，您可以使用任何其他prop。