javascript - 选择 onChange 链接到值 - ReactJS

Question

在选择框中选择 onChange 时，如何链接到值？

希望在ReactJS中实现一个select菜单，链接到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>
    );
}

这正在获取值(我相信)，但我不断收到错误 无法读取未定义的属性“值”

我尝试按照文档 here 进行操作正如一些答案中所建议的，但我还无法使用我当前的代码来实现这一点 - 请参阅完整的 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

Answer 1

而不是使用 Global window.location属性你可以创建一个单独的方法 handleChange喜欢:

constructor(props) {
    super(props);
    this.state = { }; // initialise state 

 // Make sure to bind handleChange or you can make use of arrow function

   this.handleChange = this.handleChange.bind(this);
  }

  handleChange(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.handleChange = this.handleChange.bind(this);
     }

    // Make sure class has a render method 

    render () {
     return ()  
    }
 }

在你的 <Select> 里面您可以引用handleChange

<select onChange={this.handleChange}>

您可以阅读有关 onChange 的更多信息 Here