javascript - 单击子元素时 react 获取父元素的状态/数据

Question

我有一个父元素 li 的构造，其中包含一个链接和一个很棒的字体 i。当我点击 i 时，我需要将父级的标题(来自 redux 状态)传递给函数。

1. 我需要以某种方式遍历 DOM 树才能获取它吗？
2. 我是否需要以不同的方式设置事件处理程序？

3. 单击子元素时如何访问父元素的状态？

   export default class DashContent extends React.Component {
     deleteBase(title) {
       this.props.dispatch(removeBase(title))
     }
   
     render() {
       const baseList = this.props.bases.map(base => (
         <li key={base.title} className="base">
           <Link to={base.title}>{base.title}</Link>
           <i className="fas fa-times" onClick={title => this.deleteBase(title)} />
         </li>
       ));
     }
   
     return (
       <ul>
         {baseList}
         <li>
           <AddBase />
         </li>
       </ul>
     )
   }
   

Answer 1

1. 不，你不需要遍历任何东西，你可以直接在onClick中传递它

2. 是的，您需要将 onClick 更改为这样

   onClick={() => this.deleteBase(base.title)}
   

现在在您的 deleteBase 函数中，您将标题作为参数传递

你的第三点没有多大意义，因为你在同一个组件中，所以只有 1 个本地状态，父元素和子元素都可以访问。但这对于您的情况没有用，因为您尝试访问的标题既不处于本地状态也不处于 redux 状态，而只是 base 对象本身的属性。