是否从子组件检索列表组的值返回父组件？

Question

我一直在尝试从react中的子组件中检索我正在组装的应用程序的值。我想我在这里犯了一个非常简单的错误。我最初在这里问了一个相关的问题：

响应已单击按钮的读取值

现在我的代码是这样的：

一个pp.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=> 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;

Match.js

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;

当我使用以下命令单击ListGroup项目时，我正在尝试访问该项目的值：

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)
}

但似乎无法让它发挥作用。可能一直盯着这条路看太久了。感谢你们的帮助。

Answer 1

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>
)

Other.js

alertClicked = address => {
    event.preventDefault(); // not sure what event you're preventing
    this.setState({searchLink: address});
}

如果您担心不必要的呈现，您应该寻找另一种方法来使用更定义的元素/组件实现此功能。