javascript - 在 React 中生成搜索建议？

Question

我希望生成与收集的数据相匹配的搜索建议，如下所示:

当您输入时，您会收到建议:

我引用了 WesBos 的一些教程作品:

https://github.com/wesbos/JavaScript30/blob/master/06%20-%20Type%20Ahead/index-FINISHED.html

我已经在控制台中记录了数据，但现在我不确定如何让它渲染。下面是我的组件(我的想法是在 App.js 中将 div 生成为循环，并将 props 传递给 Match.js，我最终会导入它，但我不确定我是否这样做是错误的):

App.js

import React, { Component } from 'react';
import { Form, Button } from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';


const my_data = require('./data/test.json')

class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      links: [],
      selectedLink:null,
      userLocation: {},
      searchInput: "",
      showMatches: false,
      matches: []
    };
  }

  componentDidMount() {
    fetch('https://data.cityofnewyork.us/resource/s4kf-3yrf.json')
      .then(res=> res.json())
      .then(res=> 
          //console.log(json)
          this.setState({links:res})
      );
  }

  render() {

    const handleInputChange = (event) => {
      event.preventDefault()
      this.setState({searchInput: event.target.value })
      //console.log(event.target.value)
    }

    const handleSubmit = (event) => {
      event.preventDefault()
      const data = this.state
      displayMatches();
    }

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

    const displayMatches =() => {
      const matchArray = findMatches(this.state.searchInput, this.state.links);
      matchArray.map(place => {
        console.log(place.street_address);
        this.setState({matches:place})
        this.setState({showMatches:true})
      });
    }

    return (
      <div>
         <Form style = {{width: "75%"}} onSubmit = {handleSubmit}>
            <Form.Group controlId="formSearch">
              <Form.Control 
              type="text" 
              name = "my_search" 
              placeholder="Search for a Link Near you..." 
              onChange = {handleInputChange} />
                </Form.Group>
                  <Button variant="primary" type="submit">
                    Search
                  </Button>
          </Form>
          <div>
            {`How can I generate the console logged values as dynammic suggestions?`}
          </div>

      </div>
    );
  }
}

export default App;

Match.js

import React from 'react';

const match = ( props ) => {

    return (
        <div className="Matches">
            <p>{`data is passed: ${props.address}`}</p>
        </div>
    )
};

export default match;

感谢您的帮助。

答案 - 使用下面的建议

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=> 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) => {
  //alert('you clicked an item in the group')
  const data = event.target
  console.log('clicked this data:', data)
  this.setState({searchLink: event.target})
  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}/>
                })
              }
            </ListGroup>

        </div>
    );
}
}

导出默认应用程序；

Match.js

import React from 'react';
import { ListGroup } from 'react-bootstrap';

const match = ( props ) => {

    return (
        <ListGroup.Item 
            className="Matches" 
            action onClick={props.alertClicked}>
              <p>{`${props.address}`}</p>
        </ListGroup.Item>

    )
};

export default match;

Answer 1

我认为您对于如何执行此操作的最初直觉是正确的:

1. 获取匹配项
2. 将它们存储在状态中
3. 映射状态并在每次匹配时渲染一个组件，并将相关数据作为 props 传递

为了准确回答您的问题，将状态映射到渲染组件通常如下所示:

<div>
  {
    matches.map(match => {
      return <Match address={match.address} name={match.name} />
    })
  }
</div>

您还可以像这样解构属性:

<div>
  {
    matches.map(({address, name}) => {
      return <Match address={address} name={name} />
    })
  }
</div>

此外，另一个小观察:您注意到我用大写的 M 调用组件 Match。 React 和其他基于组件的库中的一个约定是，组件的名称始终大写，不仅在文件名中，而且在代码中也是如此。