Как я могу установить ссылку на value, если в поле выбора выбран onChange?
Хотите реализовать меню select в ReactJS, которое ссылается на valueonChange.
render() {
return (
<select onChange = {() => {if (this.value) window.location.href=this.value}}>
<option value = "">Please select</option>
{pages.map(({ node: page })=> (
<option key = {page.id} value = "{page.slug}">{page.title}</option>
))}
</select>
);
}
Это получает значение (я считаю), но я продолжаю получать ошибку Cannot read property 'value' of undefined
Я пробовал следовать документам здесь, как предложено в некоторых ответах, но мне не удалось заставить это работать с моим текущим кодом - см. Ниже полный Page.js
import React from 'react'
import Helmet from 'react-helmet'
import styled from 'styled-components'
import config from '../utils/siteConfig'
const PageCompany = ({data}) => {
const {title,slug} = data.contentfulCompanyPage;
const pages = data.allContentfulCompanyPage.edges;
return(
<Wrapper>
<CompanyMenu>
<div>
<select onChange = {() => {if (this.value) window.location.href=this.value}}>
<option value = "">Please select</option>
{pages.map(({ node: page })=> (
<option key = {page.id} value = "{page.slug}">{page.title}</option>
))}
</select>
</div>
</CompanyMenu>
</Wrapper>
)
}
export const companyQuery = graphql`
query companyQuery($slug: String!) {
contentfulCompanyPage(slug: {eq: $slug}) {
title
slug
keywords
description
heroBg {
sizes(maxWidth: 1500) {
src
}
}
}
allContentfulCompanyPage(sort: {fields: [menuOrder], order: ASC}) {
edges {
node {
id
title
slug
}
}
}
}
`
export default PageCompany



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Вам нужно передать параметр event, а затем получить значение из цели этого события, например.
onChange = {(event) => this.setState({value: event.target.value})}
Есть отличный пример здесь.
Полный отрывок кода из связанных документов:
class NameForm extends React.Component {
constructor(props) {
super(props);
this.state = {value: ''};
this.handleChangeEvent = this.handleChangeEvent.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChangeEvent(event) {
this.setState({value: event.target.value});
}
handleSubmit(event) {
alert('A name was submitted: ' + this.state.value);
event.preventDefault();
}
render() {
return (
<form onSubmit = {this.handleSubmit}>
<label>
Name:
<input type = "text" value = {this.state.value} onChange = {this.handleChangeEvent} />
</label>
<input type = "submit" value = "Submit" />
</form>
);
}
}
Привет, @Darren, извини, что не решил твою проблему, но похоже, ты ее решил! :)
Вместо использования свойства Global window.location вы можете создать отдельный метод handleChangeEvent, например:
constructor(props) {
super(props);
this.state = { }; // initialise state
// Make sure to bind handleChangeEvent or you can make use of arrow function
this.handleChangeEvent = this.handleChangeEvent.bind(this);
}
handleChangeEvent(e) {
const targetValue = e.target.value;
// Then you can do whatever you want to do with the value
this.setState({
[name]: targetValue
});
РЕДАКТИРОВАТЬ : Чтобы использовать constructor, убедитесь, что вы определяете компоненты, используя синтаксис class, например:
import React , { Component } from 'react';
class PageCompany extends Component {
constructor(props) {
super(props);
this.state = { }; // initialise state
this.handleChangeEvent = this.handleChangeEvent.bind(this);
}
// Make sure class has a render method
render () {
return ()
}
}
И внутри вашего <Select> вы можете ссылаться на handleChangeEvent
<select onChange = {this.handleChangeEvent}>
Вы можете узнать больше о onChange Здесь
Спасибо @Aaquib. Это самое близкое, что я получил, но как только я выбираю value, я получаю ReferenceError: handleChangeEvent is not defined на handleChangeEvent = (e) => {. Я обновил свой вопрос, включив в него полный код страницы.
Обновил мой ответ, надеюсь, он прояснит ситуацию
Спасибо - я уже получил эту часть - проблема возникает всякий раз, когда я пытаюсь добавить constructor(props) {, он не компилируется.
Проблема в том, что как только я перемещаю поле выбора за пределы этого документа в компонент, я теряю свои данные из-за передачи. Я мог бы сопоставить это снова, но для такого простого поля выбора, кажется, должен быть способ сделать то, что у меня есть.
Обновил мой ответ снова, однако, если вы хотите использовать эти данные в другом месте, где вам нужно установить их с помощью setState, а затем получить к ним доступ внутри других компонентов с помощью props
Спасибо за вашу помощь. Я пойду посмотрю, как разместить данные в другом месте, как было предложено.
Спасибо, @Cameck. Я пробовал следовать этому документу, но не могу работать с текущим шаблоном страницы. Проблема в том, что как только я перемещаю поле выбора за пределы этого документа в
component, я теряю свои данные при передаче. Я мог бы сопоставить это снова, но для такого простого поля выбора, кажется, должен быть способ сделать то, что у меня есть. Я обновил свой вопрос, чтобы показать полный код файла. Если у вас есть предложения, я хотел бы их услышать. Еще раз спасибо.