reactjs 捕获this.nameReact onClick中某个按钮的www.example.com [复制]

qlckcl4x 于 2022-12-29 发布在 React

关注(0)|答案(3)|浏览(120)

- 此问题在此处已有答案**：

ReactJS, event.currentTarget doesn't have the same behavior as Vanilla Javascript（1个答案）
3小时前关门了。
我想在React中捕获单击按钮时的name属性。
我尝试了以下代码块：

export function TestButton(props){
    function logName() {
        console.log(this.name)
    }
    return(
        <button name={props.name} onClick={event => logName(event.currentTarget.getAttribute("name"))} type='button'>{props.text}</button>
    )
}

我的期望是这段代码将允许我创建一个在控制台日志中显示名称的按钮：

<TestButton name='helloWorld' text='Click Me'/>

相反，我得到了this is undefined的警报。这是尽管我在检查元素时能够看到名称。
我也试过target而不是currentTarget，没有运气。我也试过event.currentTarget.name，没有我想要的结果。
我错过了什么？

reactjs

来源：https://stackoverflow.com/questions/74943252/capture-this-name-of-a-button-in-react-onclick

3条答案

按热度按时间

6ljaweal1#

作为回应，我认为this是为类保留的，而您正在定义一个函数组件。在函数组件中，可比较的状态值将与useState()一起存储。也就是说，我不确定我是否认为这里有必要这样做。因为这个按钮是从某个地方得到它的属性的，并且name和text的值在这个组件中没有改变。

export const TestButton = ({props}) => {
  return(
    <button name={props.name} onClick={() => console.log(props.name)}>
      {props.text}
    </button>
  )
}

现在再深入一点，也许你想在任何呈现这个按钮的地方使用state，看起来像这样：

import {TestButton} from "./someFile";

const [name, setName] = useState("some-button");
const [text, setText] = useState("click me!");

// now there could be some code here that decides what the name or text would be 
// and updates the values of each with setName("name") and setText("text")

const Page = () => (
  <>
    <TestButton props={{name: name, text: text}} />
  </>
)

这些都是在您当前代码的基础上构建的，但现在我将以一种对我来说有意义的方式合并所有内容：

import {useState} from "react";

const [name, setName] = useState("some-button");
const [text, setText] = useState("click me!");

// some code to determine/change the value of the state vars if necessary

const TestButton = ({name, text}) => {
  return(
    <button name={name} onClick={() => console.log(name)}>
      {text}
    </button>
  )
}

export const Page = () => (
  <>
    <TestButton name={name} text={text} />
  </>
)

赞(0）回复(0）举报 2022-12-29

rsl1atfo2#

请尝试以下操作：

export function TestButton(props){
  function logName() {
      console.log(props.name)
  }
  return(
    <button name={props.name} onClick={() => logName()} type='button'>{props.text}</button>
  )
}

赞(0）回复(0）举报 2022-12-29

jecbmhm33#

试试这个

export function TestButton(props){
    const logName = (e, name) => {
        console.log("name attribute ->",  name)
    }
    return(
        <button name={props.name} onClick={ (e) => logName(e, props.name)} type='button'>{props.text}</button>
    )
}

赞(0）回复(0）举报 2022-12-29

我来回答

reactjs 捕获this.nameReact onClick中某个按钮的www.example.com [复制]

3条答案

相关问题

热门标签

最新问答