Question

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

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

我的Checkbox代码：

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

它打印出来＆＃39;它工作＆＃39;和＆＃39; undefined＆＃39;。我还在我的构造函数中使用了＆＃39; this.handleChange = this.handleChange.bind（this）。有谁可以帮我找出错误可能是什么？作为记录;我目前正在使用Semantic UI React框架 - 这可能是问题吗？

提前致谢。

Answer 1

根据docs of 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。

Answer 2

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

如果您没有尝试将密钥用于任何操作，而只是尝试从this issue thread获取更新的数据，则应该可以访问事件处理程序中的值，如下所示：

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

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

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

React Checkbox onCheck获取键值

2 个答案: