[英]Select onChange link to value - ReactJS
How can I link to a value
when selected onChange
in a select box? 在选择框中选择onChange
时,如何链接到value
?
Looking to implement a select
menu into ReactJS that links to the value
onChange
. 希望在ReactJS中实现一个select
菜单,该菜单链接到value
onChange
。
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>
);
}
This is getting the value (I believe) but I keep getting the error of Cannot read property 'value' of undefined
这是在获取值(我相信),但是我不断收到Cannot read property 'value' of undefined
的错误
I have tried following the documents here as suggested in some answers yet I have not been able to get this working with my current code - see as follows the full Page.js 我已经尝试按照某些答案中的建议按照此处的文档进行操作,但仍无法使用当前代码进行此操作-完整的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
Instead of making use of Global window.location
property you can make a separate method handleChange
like : 除了使用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
});
EDIT : In order to make use of constructor
make sure you are defining components using class
syntax like: 编辑:为了利用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 ()
}
}
And inside your <Select>
You can reference it to handleChange
在您的<Select>
您可以将其引用为handleChange
<select onChange={this.handleChange}>
You can read more about onChange Here 您可以在此处阅读有关onChange的更多信息
You need to pass the event
param and then grab the value from the target of that event eg 您需要传递event
参数,然后从该事件的目标中获取值,例如
onChange={(event) => this.setState({value: event.target.value})}
There's a great example here . 有一个很好的例子在这里 。
Full code excerpt from linked docs: 链接文档的完整代码摘录:
class NameForm extends React.Component {
constructor(props) {
super(props);
this.state = {value: ''};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(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.handleChange} />
</label>
<input type="submit" value="Submit" />
</form>
);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.