Получение значения из дочернего компонента обратно в родительский для LIstGroup?

Извлечение значения из дочернего компонента обратно в родительский для LIstGroup?

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

Реагировать на прочитанное значение нажатой кнопки

Прямо сейчас мой код выглядит так:

App.js

 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={amp}gt; res.json()) .then(res={amp}gt; //console.log(json) this.setState({links:res}) ); } handleInputChange = (event) ={amp}gt; { event.preventDefault() this.setState({searchInput: event.target.value }) console.log(event.target.value) } handleSubmit = (event) ={amp}gt; { event.preventDefault() this.displayMatches(); } findMatches = (wordToMatch, my_obj) ={amp}gt; { return my_obj.filter(place ={amp}gt; { // 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 =() ={amp}gt; { const matchArray = this.findMatches(this.state.searchInput, this.state.links); const newStateMatches = matchArray.map(place ={amp}gt; { console.log(place.street_address); return place }); this.setState({matches:newStateMatches}) this.setState({showMatches:true}) } alertClicked =(event) ={amp}gt; { 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 ( {amp}lt;div{amp}gt; {amp}lt;input placeholder="Search for a Link Near you..." onChange = {this.handleInputChange} value = {this.state.searchInput} /{amp}gt; {amp}lt;Button onClick={this.handleSubmit}{amp}gt; Search {amp}lt;/Button{amp}gt; {amp}lt;ListGroup defaultActiveKey="#link1"{amp}gt; { this.state.matches.map(match ={amp}gt; { return {amp}lt;Match address={match.street_address} alertClicked={this.alertClicked} value = {this.state.searchLink}/{amp}gt; }) } {amp}lt;/ListGroup{amp}gt; {amp}lt;/div{amp}gt; ); } } export default App; 

Match.js

 import React from 'react'; import { ListGroup } from 'react-bootstrap'; const match = ( props ) ={amp}gt; { return ( {amp}lt;ListGroup.Item className="Matches" action onClick={props.alertClicked} value = {props.value}{amp}gt; {amp}lt;p{amp}gt;{`${props.address}`}{amp}lt;/p{amp}gt; {amp}lt;/ListGroup.Item{amp}gt; ) }; export default match; 

Я пытаюсь получить доступ к значению элемента ListGroup, когда я нажимаю на него с этим:

 alertClicked =(event) ={amp}gt; { 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) } 

Но не могу заставить его работать. Наверное, слишком долго смотрел на это. Ценю помощь, ребята.

Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector