Question

我在外部文件中有一个对象，我想将url传递到按钮onClick中，但是我不知道传递值。

对象：

const ProjectLists = [

    {
        id: "4",
        iconImage: "",
        name: "Simple",
        description: "Simple is a corporate responsive template and the absolutely clean & modern template theme for your business. The theme was built by Foundation Framework and take advantages of it features: grid system, typography, buttons, form, UI element, section and more.",
        technologies: "HTML, CSS, JavaScript",
        href: "http://striped-dolls.surge.sh"
    }
]

export default ProjectLists;

如何将ProjectLists.map((project, i) =>中的href map()传递到<button>

class Projects extends Component {
  render() {
    return (
      <div>
        {ProjectLists.map((project, i) =>

        <section className='section'>
          <div className='row'>
            <div className='col-sm'>
              <div className='content-left'>
                <p key={project.id + i}>
                  {project.iconImage}
                </p>
              </div>
            </div>
            <div className='col-sm-8'>
              <div className='content-right text-left'>
                <h1>{project.name}</h1>
                <p>{project.description}</p>
                <p>Technologies: {project.technologies}</p>
                <button type='submit' onClick=() => </button>>View live</button>
              </div>
            </div>
          </div>
        </section>
        )}
      </div>
    )
  }
}

谢谢您的帮助！

Answer 1

您可以为此目的使用“ a”标签。

<a href={project.href}></a>

如果您想在按钮中使用onClick，则可以尝试一下。

onClick={() => { window.location.href = project.href }}

Answer 2

您可以使用箭头功能在地图中传递其他数据：

{ProjectLists.map(project =>
  <button onClick={onProjectClick(project)}>View live</button>
}

// e.g.
onProjectClick = project => event => {
  console.log(project.description);
  navigateTo(project.href);
}

我注意到您的按钮上有type="submit"，因此要处理的正确事件是表单元素上的onSubmit，但是因为这可以处理例如按Return键的操作（虽然不是必须的）。

Answer 3

  state = {
    redirect: false
  }
  setRedirect = (href) => {
    window.location.href = href;
  }

调用setRedirect函数

<button onClick={()=>this.setRedirect(project.href)}>View live</button>

如何使用onClick React传递对象？

3 个答案: