获取单击按钮反应钩子上的按钮值

Question

我现在有两个按钮我想在单击按钮后获取按钮的值。

现场演示代码和框：get button value

我尝试了以下方法。

import "./styles.css";
import React, { useState } from "react";

export default function App() {
  const [position, setPosition] = useState("");

  const handleNextStep = (e) => {
    console.log("label", e.target.innerHTML);
    console.log("label", e.target.innerHTML);
  };
  return (
    <div className="App">
      <h1>Hello Click the buttons bellow</h1>
      <div className="btn-group my-3 d-flex justify-content-center align-items-center">
        <button
          type="button"
          className={`btn btn-sm mx-2  ${
            position === "BottomLeft" ? "btn-info text-white" : "btn-lightDark"
          }`}
          onClick={() => {
            setPosition(position !== "BottomLeft" ? "BottomLeft" : "");
            handleNextStep();
          }}
        >
          Bottom Left
        </button>
        <button
          type="button"
          className={`btn btn-sm mx-2  ${
            position === "BottomRight" ? "btn-info text-white" : "btn-lightDark"
          }`}
          onClick={() => {
            setPosition(position !== "BottomRight" ? "BottomRight" : "");
            handleNextStep();
          }}
        >
          Bottom Right
        </button>
      </div>
    </div>
  );
}
import "./styles.css";
import React, { useState } from "react";

export default function App() {
  const [position, setPosition] = useState("");

  const handleNextStep = (e) => {
    console.log("label", e.target.innerHTML);
    console.log("label", e.target.innerHTML);
  };
  return (
    <div className="App">
      <h1>Hello Click the buttons bellow</h1>
      <div className="btn-group">
        <button
          type="button"
          className={`btn btn-sm mx-2  ${
            position === "BottomLeft" ? "btn-info" : "btn-lightDark"
          }`}
          onClick={() => {
            setPosition(position !== "BottomLeft" ? "BottomLeft" : "");
            handleNextStep();
          }}
        >
          Bottom Left
        </button>
        <button
          type="button"
          className={`btn btn-sm mx-2  ${
            position === "BottomRight" ? "btn-info" : "btn-lightDark"
          }`}
          onClick={() => {
            setPosition(position !== "BottomRight" ? "BottomRight" : "");
            handleNextStep();
          }}
        >
          Bottom Right
        </button>
      </div>
    </div>
  );
}

但我收到错误：react-dom.development.js:327 Uncaught TypeError: Cannot read property 'target' of undefined。

这里有什么问题？

Answer 1

我假设“值”是指 <button> 标签内的内容。在这种情况下，您需要：

  const handleNextStep = (e) =>{
    console.log('label', e.target.innerHTML)
  }

此外，我不确定您将如何获得 react-dom.development.js:327 Uncaught TypeError: Cannot read property 'target' of undefined。您应该只得到一个空字符串或 undefined.

只是一个辅助节点：e.target.innerText 也可以。

基于更新

handleNextStep = (e) => { 期待您不发送的偶数，因此您只需要将点击事件向下传递到代理函数中：

      <div className="btn-group">
        <button
          type="button"
          className={`btn btn-sm mx-2  ${
            position === "BottomLeft" ? "btn-info" : "btn-lightDark"
          }`}
          onClick={(e) => {
            setPosition(position !== "BottomLeft" ? "BottomLeft" : "");
            handleNextStep(e);
          }}
        >
          Bottom Left
        </button>
        <button
          type="button"
          className={`btn btn-sm mx-2  ${
            position === "BottomRight" ? "btn-info" : "btn-lightDark"
          }`}
          onClick={(e) => {
            setPosition(position !== "BottomRight" ? "BottomRight" : "");
            handleNextStep(e);
          }}
        >
          Bottom Right
        </button>
      </div>

https://codesandbox.io/s/weathered-https-s0y2x?file=/src/App.js

获取单击按钮反应钩子上的按钮值

Get button value on clicked button react hooks

javascript

event-handling

reactjs