Question

我有一个名为AutoFill的组件，看起来像这样

const AutoFill = (props) => {
  console.log('proppppppsss', props)
  const results = props.results || []

  return (
    <ul>
      {results.map(({ name, href }) => (
        <li key={href}>
          <a href={href} target='_blank' rel='noopener noreferrer' key={href}>
            {name}
          </a>
        </li>
      ))}
    </ul>
  )
}

数据通过的Json文件如下所示，

[
  {
    "a": {
      "apple": {
        "name": "apple",
        "href": "https://www.apple.com/"
      },
      "armadillo": {
        "name": "armadillo",
        "href": "https://www.armadillo.com/"
      }
    },
    "b": {
      "box": {
        "name": "box",
        "href": "https://www.box.com/"
      },
      "berserk": {
        "name": "berserk",
        "href": "https://www.berserk.com/"
      }
    }
  }
]

从json

获取数据的提取

import fetch from 'isomorphic-fetch'

const FetchAndParseResults = (url) => {
  return fetch(url).then(response => {
    const parsedJson = response.json()
    return parsedJson
  })
}

export default FetchAndParseResults

使用自动填充

的搜索

import AutoFill from './autofill'
import PropTypes from 'prop-types'

export default class Searchbar extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      className: Styles.input,
      icon: Styles.icon__wrapper,
      value: []
    }
    this.input = React.createRef()
  }

  openInput = () => {
    this.setState({
      className: Styles.input__active,
      icon: Styles.iconWidth
    }, () => {
      this.input.focus()
    })
    this.props.onOpen && this.props.onOpen()
  }

  closeInput = () => {
    this.setState({
      className: Styles.input,
      icon: Styles.icon__wrapper
    })
    this.props.onClose && this.props.onClose()
  }

  handleChange = event => {
    let value = event.target.value
    this.setState({ value })
    this.props.performSearch(value)
  }

  handleSubmit = event => {
    event.preventDefault()
  }

  render () {
    console.log('results', this.props.results)
    console.log('state.value', this.state.value)
    return (
      <div>
        <form onSubmit={this.handleSubmit} className={Styles.search}>
          <div className={this.state.icon}>
            <Icon className={Styles.icon__wrapper} iconName='faSearch' onClick={this.openInput} />
          </div>
          <Search autoComplete='off' value={this.state.value} onChange={this.handleChange} id='search' tabIndex='0' myref={input => { this.input = input }} className={this.state.className} onBlur={this.closeInput} placeholder='Search' />
        </form>
        <div>
          <AutoFill results={this.props.results} />
        </div>
      </div>
    )
  }
}

Search.propTypes = {
  performSearch: PropTypes.func,
  results: PropTypes.array
}

充分利用一切的searchContainer

import React from 'react'
import Searchbar from './index.js'
import FetchAndParseResults from './FetchAndParseResults.js'

class SearchContainer extends React.Component {
    state = {
      results: []
    }

    performSearch = event => {
      return FetchAndParseResults('static/autofill.json').then(data => {
        this.setState({ results: data })
      })
    }

    render () {
      return (
        <Searchbar
          performSearch={this.performSearch}
          results={this.state.results}
        />
      )
    }
}

export default SearchContainer

在<a href={href} target='_blank' rel='noopener noreferrer' key={href}>{name}</a> 应该显示名称的数据，但是我得到的不是名称， https://gyazo.com/647176b09afcd55b4238f7975c0e7488

一个空的无序列表。

因此，非常感谢您的帮助，并调查了。

在React.js的搜索栏中显示来自JSON的数据作为建议

0 个答案: