React/JavaScript疑问：箭头函数中为何无法访问target属性？

算力阿峰

2026-7-23

问题解答

这是对象解构语法的使用误区，你写的({ target: {value}})属于嵌套解构只提取内层属性的写法，并没有把target本身赋值为变量，所以自然访问不到。

拆解你的解构逻辑

当你写({ target: {value}})时，JavaScript做了这两件事：

从传入的event对象中取出target属性
再从target对象中取出value属性，把它赋值给局部变量value

整个过程里，并没有把target这个属性赋值给同名变量target——这里的target:只是用来定位内层value的路径，不是声明变量。

正确的写法

如果需要同时拿到target和value，有两种常用方式：

方式1：同时解构`target`和它的`value`

直接在解构里同时声明target变量，再嵌套提取value：

import React from 'react';

function App() {
  // 同时解构target和target.value
  const handleChange = ({ target, target: { value } }) => {
    console.log(target); // 正常输出input元素对象
    console.log(value);  // 正常输出输入值
  }
  
  return (
    <input name="firstName" onChange={handleChange} />
  );
}

export default App;

方式2：先解构`target`，再在函数内提取`value`

这种写法更清晰，适合需要用到target其他属性的场景：

import React from 'react';

function App() {
  const handleChange = ({ target }) => {
    const { value } = target;
    console.log(target); // 正常输出
    console.log(value);  // 正常输出
  }
  
  return (
    <input name="firstName" onChange={handleChange} />
  );
}

export default App;