reactjs - 提交时如何获取json数据的输入值

Question

我有 json 数据文件。我想使用数据名称进行搜索，并在单击搜索按钮时显示输入的名称。

当我输入内容时，我在控制台中获得了输入值，但是我无法在屏幕上显示它如何显示这个输入的值？

我的代码在下面

PostResults.jsx

import React from "react";


const PostResults = (props) => {
  const {name} = props.posts
  return(
        <div className="">
          <p className="titles">{name}</p>
        </div>
  )
}

export default PostResults

Posts.jsx

import React, { useState, useEffect } from "react";
import PostResults from './PostResults'



const Posts = (props) => {
  const [posts, setPosts] = useState([]);
  const [searchTerm,setSearchTerm]=useState([]);

    const getData = () => {
    fetch('data.json')
    .then(response => {
      return response.json()
      //console.log(response)
    })
    .then(data => {
      setPosts(data)
      console.log(data)
    })
  }

  useEffect(() => {
    getData()
  },[])

  const submitHandler = (event) => {
    event.preventDefault()
      {searchTerm ? searchTerm : console.log("none")}
    }
     
  return(
       <div className="">
                <input 
                  type="text" 
                  placeholder="Search Anything" 
                  name="query" 
                  onChange={e => setSearchTerm(e.target.value)}
                  className="search-input" 
                />
                <button 
                  onClick={submitHandler} 
                  type="submit" 
                  className="search-button"
                >
                  <i className="fas fa-search"></i>
              </button>
               {posts.map(posts => (
                <PostResults key={posts.id} posts={posts}/>
              ))}
       </div>
  )
}

export default Posts 

App.jsx

import React from "react";
import "./style.css";
import 'bootstrap/dist/css/bootstrap.min.css'
import Posts from './components/Posts'


export default function App() {
  return (
    <div className="container">
      <div className="row">
      < Posts />
      </div>
    </div>
  );
}

标签： reactjsreact-hooks