Javascript 是否从子组件检索列表组的值返回父组件?
我一直在尝试从react中的子组件中检索我正在组装的应用程序的值。我想我在这里犯了一个非常简单的错误。我最初在这里问了一个相关的问题: 现在,我的代码如下所示: App.jsJavascript 是否从子组件检索列表组的值返回父组件?,javascript,reactjs,react-bootstrap,Javascript,Reactjs,React Bootstrap,我一直在尝试从react中的子组件中检索我正在组装的应用程序的值。我想我在这里犯了一个非常简单的错误。我最初在这里问了一个相关的问题: 现在,我的代码如下所示: App.js import React, { Component } from 'react'; import { Form, Button, ListGroup } from 'react-bootstrap'; import 'bootstrap/dist/css/bootstrap.min.css'; import Match
import React, { Component } from 'react';
import { Form, Button, ListGroup } from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
import Match from './Match'
const my_data = require('./data/test.json')
class App extends Component {
state = {
links: [],
selectedLink:null,
userLocation: {},
searchInput: "",
showMatches: false,
matches: [],
searchLink:[]
}
componentDidMount() {
fetch('https://data.cityofnewyork.us/resource/s4kf-3yrf.json')
.then(res=> res.json())
.then(res=>
//console.log(json)
this.setState({links:res})
);
}
handleInputChange = (event) => {
event.preventDefault()
this.setState({searchInput: event.target.value })
console.log(event.target.value)
}
handleSubmit = (event) => {
event.preventDefault()
this.displayMatches();
}
findMatches = (wordToMatch, my_obj) => {
return my_obj.filter(place => {
// here we need to figure out the matches
const regex = new RegExp(wordToMatch, 'gi');
//console.log(place.street_address.match(regex))
return place.street_address.match(regex)
});
}
displayMatches =() => {
const matchArray = this.findMatches(this.state.searchInput, this.state.links);
const newStateMatches = matchArray.map(place => {
console.log(place.street_address);
return place
});
this.setState({matches:newStateMatches})
this.setState({showMatches:true})
}
alertClicked =(event) => {
event.preventDefault()
//alert('you clicked an item in the group')
const data = event.target.value
console.log('clicked this data:', data)
this.setState({searchLink: event.target.value})
console.log(this.state.searchLink)
}
render() {
return (
<div>
<input
placeholder="Search for a Link Near you..."
onChange = {this.handleInputChange}
value = {this.state.searchInput}
/>
<Button onClick={this.handleSubmit}>
Search
</Button>
<ListGroup defaultActiveKey="#link1">
{
this.state.matches.map(match => {
return <Match
address={match.street_address}
alertClicked={this.alertClicked}
value = {this.state.searchLink}/>
})
}
</ListGroup>
</div>
);
}
}
export default App;
import React from 'react';
import { ListGroup } from 'react-bootstrap';
const match = ( props ) => {
return (
<ListGroup.Item
className="Matches"
action onClick={props.alertClicked}
value = {props.value}>
<p>{`${props.address}`}</p>
</ListGroup.Item>
)
};
export default match;
但似乎无法让它发挥作用。可能一直盯着这条路看太久了。感谢大家的帮助。Match.js
import React from 'react';
import { ListGroup } from 'react-bootstrap';
const match = ({ alertClicked, address }) => {
return (
<ListGroup.Item
className="Matches"
action
// function expressions could cause this to rerender unnecessarily.
onClick={(address) => alertClicked(address)}>
<p>{`${address}`}</p>
</ListGroup.Item>
)
如果您担心不必要的渲染,您应该寻找另一种方法,通过更明确的元素/组件来实现此功能。状态更新是异步的。因此,在
setState
之后立即进行日志记录只会给出旧值,使用setState
的回调我正在查看react引导文档,没有看到value
的任何参数。
import React from 'react';
import { ListGroup } from 'react-bootstrap';
const match = ({ alertClicked, address }) => {
return (
<ListGroup.Item
className="Matches"
action
// function expressions could cause this to rerender unnecessarily.
onClick={(address) => alertClicked(address)}>
<p>{`${address}`}</p>
</ListGroup.Item>
)
alertClicked = address => {
event.preventDefault(); // not sure what event you're preventing
this.setState({searchLink: address});
}