React中点击按钮如何获取按钮数值？打印x得到庞大对象

嗨，我来帮你搞定这个问题～你之所以打印出一个庞大的对象，是因为React的onClick回调函数默认接收的第一个参数是合成事件对象（也就是你代码里的x），而不是按钮上的文字内容。下面给你几种实用的解决方案：

方法1：通过事件对象获取按钮文本 #

直接从事件对象的target属性里拿到按钮的文本内容，再转成数字就行：

function IncrementOnClick() { 
  function increment(e) { 
    // 获取按钮文本并转为数字
    const buttonValue = Number(e.target.textContent);
    console.log(buttonValue); // 现在会输出1啦
  } 
  return ( 
    <div> 
      <button onClick={increment}>1</button> 
    </div> 
  ); 
}

这个方法适合按钮显示的文字就是你需要的数值的场景。

方法2：使用自定义数据属性（更灵活） #

如果按钮显示的内容和实际需要的数值不一致（比如按钮显示“点击加1”但实际值是1），可以给按钮加data-*自定义属性，再通过事件对象获取：

function IncrementOnClick() { 
  function increment(e) { 
    const buttonValue = Number(e.target.dataset.value);
    console.log(buttonValue); // 输出1
  } 
  return ( 
    <div> 
      <button onClick={increment} data-value="1">点击加1</button> 
    </div> 
  ); 
}

方法3：直接传递数值给回调函数 #

如果你已经明确知道要传递的数值，不需要从DOM读取，可以用箭头函数包裹回调，直接把数值传进去：

function IncrementOnClick() { 
  function increment(value) { 
    console.log(value); // 直接拿到数值1
  } 
  return ( 
    <div> 
      <button onClick={() => increment(1)}>1</button> 
    </div> 
  ); 
}

这种方式最直接，避免了操作DOM，推荐在数值固定或者从组件状态/ props里获取的场景使用。

内容的提问来源于stack exchange，提问作者mani_ninja