Выберите ссылку onChange на значение - ReactJS

Как я могу установить ссылку на 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
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
0
10 406
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Вам нужно передать параметр 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>
    );
  }
}

Спасибо, @Cameck. Я пробовал следовать этому документу, но не могу работать с текущим шаблоном страницы. Проблема в том, что как только я перемещаю поле выбора за пределы этого документа в component, я теряю свои данные при передаче. Я мог бы сопоставить это снова, но для такого простого поля выбора, кажется, должен быть способ сделать то, что у меня есть. Я обновил свой вопрос, чтобы показать полный код файла. Если у вас есть предложения, я хотел бы их услышать. Еще раз спасибо.

Darren 24.03.2018 22:14

Привет, @Darren, извини, что не решил твою проблему, но похоже, ты ее решил! :)

cameck 25.03.2018 16:08
Ответ принят как подходящий

Вместо использования свойства 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) => {. Я обновил свой вопрос, включив в него полный код страницы.

Darren 24.03.2018 22:16

Обновил мой ответ, надеюсь, он прояснит ситуацию

Aaqib 24.03.2018 22:21

Спасибо - я уже получил эту часть - проблема возникает всякий раз, когда я пытаюсь добавить constructor(props) {, он не компилируется.

Darren 24.03.2018 22:28

Проблема в том, что как только я перемещаю поле выбора за пределы этого документа в компонент, я теряю свои данные из-за передачи. Я мог бы сопоставить это снова, но для такого простого поля выбора, кажется, должен быть способ сделать то, что у меня есть.

Darren 24.03.2018 22:29

Обновил мой ответ снова, однако, если вы хотите использовать эти данные в другом месте, где вам нужно установить их с помощью setState, а затем получить к ним доступ внутри других компонентов с помощью props

Aaqib 24.03.2018 22:37

Спасибо за вашу помощь. Я пойду посмотрю, как разместить данные в другом месте, как было предложено.

Darren 24.03.2018 22:44

Другие вопросы по теме