Как передать объект с помощью onClick React?

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

Вы можете передать дополнительные данные на карту, используя функции стрелок:

{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 2

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

вызов функции setRedirect

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

Answer 3

Вы можете использовать тег «a» для этой цели.

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

Если вы хотите использовать onClick в своей кнопке, то вы можете попробовать это.

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