无法在React中使用元素属性（props）

Question

这是我的输入元素，具有键和类别名称属性

<input 
  className="is-checkradio is-circle" 
  id={item.CategoryID} 
  key={item.CategoryID}
  categoryname={this.props.node.CategoryName}
  type="radio" name="categoryCheckBox"
  onClick={this.UpdateCategory}
/>

我想在onClick事件UpdateCategory

中将它们传递给prop函数。

UpdateCategory({ target }) {
    console.log(target);
    console.log(target.categoryname);
    this.props.UpdateManualCategory(target.id, target.categoryname);
}

但是类别名称中的值未定义并且不确定为什么不显示键

Answer 1

任何不是元素上预定义属性的属性都不能直接从target获得。而且虽然id是输入的预定义属性，但categoryname不是输入的

要访问它们，您需要使用getAttribute方法

UpdateCategory({ target }) {
    this.props.UpdateManualCategory(target.id, target.getAttribute('categoryname'));
}

Answer 2

尝试使用此

      UpdateCategory(e) {
        e.persist();
        const target=e.target;
        console.log(target);
        const category=target.getAttribute('categoryname')
        console.log(category);
        this.props.UpdateManualCategory(target.id,category);
     }

Answer 3

您可以这样考虑：

const {node, UpdateManualCategory} = this.props
...
<input 
  className="is-checkradio is-circle"
  key={item.CategoryID}
  type="radio" name="categoryCheckBox"
  onClick{()=> UpdateManualCategory(item.CategoryID, node.CategoryName)}}
/>

Answer 4

您的问题已解决。请转到下面的网址，您将获得解决问题的代码。

https://stackblitz.com/edit/react-qz4i2x

我希望它能解决您的问题。