Question

所以我想知道是否可以在组件中添加方法，以便可以通过插入类似代码的h1事件来单击target.value元素以重定向到相应的onClick页面下方：

import React from 'react'
import CollectionItem from '../collection-item/collection-item.component'
import './collection-preview.styles.scss'
import { withRouter } from 'react-router-dom'


const CollectionPreview = ({ title, items, history }) => (
    <div className='collection-preview'>
        <h1 className='title' onClick={(event) => history.push(`/shop/${event.target.value}`)}>
            {title.toUpperCase()}
        </h1>
        <div className='preview'>
            {
                items
                    .filter((item, index) => index < 4)
                    .map((item) => (
                        <CollectionItem key={item.id} item={item} />))
            }
        </div>
    </div>
)

export default withRouter(CollectionPreview)

但是它没有用。 event.target.value始终返回undefined，即使当我尝试仅控制台记录event.target时，它通常也会返回我单击的h1元素。我该如何解决？

Answer 1

我不确定您为什么在H1上使用onClick事件。我认为您可以在H1标签内使用链接。

import React from "react";
import CollectionItem from "../collection-item/collection-item.component";
import "./collection-preview.styles.scss";
import { withRouter, Link } from "react-router-dom";

const CollectionPreview = ({ title, items, history }) => (
  <div className="collection-preview">
  
    <h1 className="title">
      // You should use a Link component instead on the onClick props
      <Link to={`/shop/${title.toUpperCase()}`}>{title.toUpperCase()}</Link>
    </h1>
    
    <div className="preview">
      {items
        .filter((item, index) => index < 4)
        .map(item => (
          <CollectionItem key={item.id} item={item} />
        ))}
    </div>
  </div>
);

export default withRouter(CollectionPreview);

希望有帮助。编码愉快

Answer 2

如果是列表页面，并且想要导航到列表的特定页面。

<h1 className='title' onClick={() => history.push(`/shop/${title}`)}>
    {title.toUpperCase()}
</h1>

代替

<h1 className='title' onClick={(event) => history.push(`/shop/${event.target.value}`)}>
    {title.toUpperCase()}
</h1>

反应event.target.value返回未定义

2 个答案: