Question

我正在使用ReactJS。

我正在尝试获取ReactJS组件的自定义属性-name-。 e.target.name在我的控制台上返回“ undefined”。

我不知道为什么。

这是我的摘录-you can test it on CodeSandbox。 更新：该代码段已使用有效的解决方案进行了更新。在编写这些行时，我使用React 16.4.2 + NextJS 6.1.1。

export default class view_recipes extends Component {

  state={ 
    displayCategoryMenu:true,
    displayBox1: false, 
    displayBox2: false,
    displayBox3: false,
    displayBox4: false,
    displayBox5: false,
    displayBox6: false,
  };

  handleDisplaying = (e) => { 
    e.preventDefault();
    console.log("EVENT: ",  e.currentTarget.attributes.reactname.value )
    let display = { 
      displayCategoryMenu:false,
      displayBox1: false, 
      displayBox2: false,
      displayBox3: false,
      displayBox4: false,
      displayBox5: false,
      displayBox6: false,
    };

    console.log("display: ", display)

  }

  render() {
    return (
    <Layout>
      <div className={style.page}>
        <div 
        style={this.state.displayCategoryMenu? {} : { display: 'none' }}
        className={style.category_grid} > 

            <div reactname="displayBox1" onClick={(e) => this.handleDisplaying(e)} > 
              <Populater_s_ComponentHere />
            </div>
        </div>
           // The functionalities above determine if I display this component
           <div
           style={this.state.displayBox1 ? {} : { display: 'none' }}
           > 
              <SomeComponentHere />   
           </div> 
      </div>
    </Layout>
    )
  }
}

Devin Fields和Hemari Davari的解决方案在上述片段中效果很好。可悲的是，我的代码块无法解决这些问题。因此，我重构了沙箱，使其更接近我的代码的实际情况。您将看到属性返回未定义。

此处是重构的代码段：https://codesandbox.io/s/l5k5ynv9vq。

谢谢

Answer 1

它应该在e.target.attributes下。我只是检查自己，就在那儿。具体来说，是e.target.attributes.name.value。

Here the functional snippet。

另请参阅以下答案，它们提出了将属性传递给onClick方法的不同方法：div's id attribute is undefined/not getting captured onClick in a react app

您正在使用“ this.handleDisplaying”，但问题是调用该方法时上下文已更改，并且该上下文中没有handleDisplaying方法。如果删除“ this”并仅调用handleDisplaying方法，它将按预期工作。对于您的情况，这应该很好，因为您没有将方法传递给孩子，并且要求上下文保持不变。

此代码段显示了删除“ this”的替代方法，该方法会将组件转换为类：https://codesandbox.io/s/m7qr67o23x

Answer 2

您可以使用

e.target.attributes["name"] or e.target.attributes[0]

ReactJS _名称自定义属性-我的React组件的自定义属性返回“未定义”

2 个答案: