我希望能够从URL获取参数。
我有两个参数。一个是“ pattern_name”的字符串，另一个是“ selected”，即图像数组。 “ pattern_name”具有对应的图像阵列（“ selected”）。目前，我正在使用React Router的Link从组件Gallery传递到组件Verifier的那些道具。
以以下示例为例：http://localhost:3000/verifier/greeneyes
在这种情况下，我希望能够获取参数“ pattern_name”“ greeneyes”并将其与“选定”参数一起呈现。
我可以获取pattern_name参数并进行渲染，但是我无法将其与相应的“选定”参数一起使用。
那么，如何将道具传递到另一个组件并从URL中获取道具呢？
感谢您的帮助。谢谢！
图库组件
//Gallery.js
class Gallery extends Component{
constructor(props) {
super(props);
this.state = {
selected: [],
pattern_name:''
};
this.handleClick = this.handleClick.bind(this);
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
arrayRemove(arr, value) {
return arr.filter(function(ele){
return ele != value;
});
}
handleClick = tile => {
if(!this.isSelected(this.state.selected, tile)){
this.setState({
selected: this.state.selected.concat([tile])
});
}else{
this.setState({
selected: this.arrayRemove(this.state.selected,tile)
});
}
console.log(this.state)
}
handleChange (event) {
this.setState({ pattern_name: event.target.value });
}
handleSubmit(event) {
alert('A pattern was submitted: ' + this.state.pattern_name);
event.preventDefault();
}
isSelected = (selected, tile) => {
return selected.find(tileItem => tileItem.img === tile.img)
}
onKeyPress(event) {
return (event.charCode >= 65 && event.charCode <= 90) ||(event.charCode >= 97 && event.charCode <= 122);
}
onlyLetters(e) {
const re = /[a-zA-Z ]+/g;
if (!re.test(e.key)) {
e.preventDefault();
}
}
render(){
return (
<Container>
<h2>Pattern Recognizer</h2>
<p>Please select the images in which you find a pattern. (Example: three cats have blue eyes)
<br/>You can only select images that are Unknown Unknowns (UU).
<br/>Extra money if you find <b>unique</b> patterns, that is, not so obvious patterns. </p>
<Row>
<Col>
<div style={styles.root}>
<GridList cellHeight={160} style={styles.gridList} cols={4}>
{tileDataUU.map((tile,i) => (
<GridListTile key={i} cols={tile.cols || 1} style={styles.tile} >
<img src={tile.img} alt={tile.title} onClick={() => this.handleClick(tile)} style={this.isSelected(this.state.selected, tile) ? styles.inputClicked:styles.inputNormal} />
<GridListTileBar
title={tile.title}
style={styles.titleBar}>
</GridListTileBar>
</GridListTile>
))}
</GridList>
</div>
</Col>
</Row>
<Row>
<Col>
<div style={styles.root}>
<GridList cellHeight={160} style={styles.gridList1} cols={4}>
{tileDataKK.map((tile,i) => (
<GridListTile key={i} cols={tile.cols || 1} style={styles.tile} >
<img src={tile.img} alt={tile.title}/>
<GridListTileBar
title={tile.title}
style={styles.titleBar}>
</GridListTileBar>
</GridListTile>
))}
</GridList>
</div>
</Col>
</Row>
<Row>
<form onSubmit={this.handleSubmit}>
<Col>
<label>Pattern Description</label>
</Col>
<Col>
<textarea type="text" name="pattern_name" style={{width: "370px"}} maxLength="140" onKeyPress={(e) => this.onlyLetters(e)} onChange={this.handleChange}/>
</Col>
<Col>
<input type="submit" value="Submit" />
</Col>
</form>
</Row>
<Link to={{
pathname: `/verifier`,
state: {pattern_name: this.state.pattern_name,
selected: this.state.selected}
}} > Verifier</Link>
</Container>
);
}
}
export default Gallery;
验证者组件
// Verifier.js
const arr3 = [...tileDataKK, ...tileDataUU]
arr3.sort( () => Math.random() - 0.5);
class Verifier extends Component {
constructor(props) {
super(props);
this.state = {
selected1:[],
pattern_name: this.props.pattern_name,
};
this.onClick = this.onClick.bind(this);
}
arrayRemove(arr, value) {
return arr.filter(function(ele){
return ele != value;
});
}
handleClick = tile => {
if(!this.isSelected(this.state.selected1, tile)){
this.setState({
selected1: this.state.selected1.concat([tile])
});
}else{
this.setState({
selected1: this.arrayRemove(this.state.selected1,tile)
});
}
}
checker = (arr, target) => target.every(v => arr.includes(v));
onClick(event) {
event.preventDefault();
if(this.checker(this.state.selected1, this.props.location.state.selected) && this.state.selected1.length === this.props.location.state.selected.length){
alert('CORRECT')
}else{
alert('INCORRECT')
}
}
isSelected = (selected1, tile) => {
return selected1.find(tileItem => tileItem.img === tile.img)
}
render() {
console.log(this.props)
return (
<Container>
<div>
<h2>Pattern Found</h2>
<p>{this.props.location.state.pattern_name}</p>
</div>
<h2>Pattern Verifier</h2>
<p>Please select the images that you consider follow the pattern shown above.
<br/>These patterns were found by other workers, so now it's time to verify them. </p>
<Row >
<Col>
<div style={styles.root}>
<GridList cellHeight={160} style={styles.gridList} cols={4}>
{arr3.map((tile,i) => (
<GridListTile key={i} cols={tile.cols || 1} style={styles.tile} >
<img src={tile.img} alt={tile.title} onClick={() => this.handleClick(tile)} style={this.isSelected(this.state.selected1, tile) ? styles.inputClicked:styles.inputNormal} />
</GridListTile>
))}
</GridList>
</div>
</Col>
</Row>
<form onSubmit={this.onClick}>
<label>Pattern Name </label>
<input type="submit" value="Submit" />
</form>
</Container>
);
}
}
export default Verifier;
应用组件
// App.js
import React from 'react';
import Gallery from './Gallery.jsx';
import Verifier from './Verifier.jsx';
import Navigation from './Navigation.jsx';
import {BrowserRouter, Route, Switch} from "react-router-dom";
const App = () => (
<BrowserRouter>
<div>
<Navigation />
<Switch>
<Route path="/" component={Home} exact/>
<Route path="/gallery/" component={Gallery} exact/>
<Route path="/verifier/:pattern_name" component={Verifier}/>
</Switch>
</div>
</BrowserRouter>
);
export default App;