Javascript 如何使用react通过搜索操作滚动到列表中的项目？

因此，我制作了一个react应用程序，它显示了一个json文件中的项目列表，如图所示。 我想实现一个搜索功能，在这里我可以输入名字，它会在列表中检查名字并滚动到它

有人告诉我滚动到视图中，但我不知道如何使其与列表中的名称进行比较

我的App.js代码

import React,{useState} from 'react';
import Notes from './Notes';
import './App.css';

function App() {

  const [notes] = useState([]);
  const handleSubmit= ()=>{
      //Upon submitting I want the search functionality to be implemented here . If thats the way to do it.
  }

  return (
    <div className="App">

      <div className="App-header">  
        <form><input type="text" placeholder="Start Typing.." onSubmit={handleSubmit} ></input></form>
        <div className="pageTitle">Song Notes :</div> 
        <Notes thisNotes={notes}/>   
      </div>

    </div>
  );
  }

export default App;

import React from "react";
const jsonNotes = require("./Notes.json");

const Notes = ({ notes }) => {
  const songNotes = jsonNotes.map(note => {
    return (
      <div id={note.id} key={note.id}>
        <li className="noteAsList">
          <div className="songTitle">{note.Name}</div>
          <pre>
            <br />
            {note.Notes}
          </pre>
        </li>
      </div>
    );
  });

  return <div className="noteStyle">{songNotes}</div>;
};

export default Notes;

import React，{useState}来自“React”；
从“/Notes”导入注释；
导入“/App.css”；
函数App（）{
const[notes]=useState（[]）；
常量handleSubmit=（）=>{
//提交后，我希望在这里实现搜索功能。如果是这样做的话。
}
返回(
歌曲注释：
);
}
导出默认应用程序；

My Notes.js代码：

import React from 'react';
const Notes = ({notes})=>{
    const jsonNotes = require('./Notes.json');
    const songNotes = jsonNotes.map(note => {
        return(
            <div key={note.id}>
            <li class="noteAsList">

            <div className="songTitle">{note.Name}</div>

            <pre><br></br>{note.Notes}</pre>
            </li>
            </div>
        )
    })

    return(
        <div className="noteStyle">
          {songNotes} 
        </div>
    )
}

export default Notes;

从“React”导入React；
常量注释=（{Notes}）=>{
const jsonNotes=require（'./Notes.json'）；
const-sonnotes=jsonNotes.map（note=>{
返回(

{note.Name}


{note.Notes}

)
})
返回(
{songNotes}
)
}
导出默认票据；

我希望实现这样一个目标。要么滚动到页面中的视图中，要么只是显示我要的项目

提前感谢您的帮助。

我的App.js代码

import React,{useState} from 'react';
import Notes from './Notes';
import './App.css';

function App() {

  const [notes] = useState([]);
  const handleSubmit= ()=>{
      //Upon submitting I want the search functionality to be implemented here . If thats the way to do it.
  }

  return (
    <div className="App">

      <div className="App-header">  
        <form><input type="text" placeholder="Start Typing.." onSubmit={handleSubmit} ></input></form>
        <div className="pageTitle">Song Notes :</div> 
        <Notes thisNotes={notes}/>   
      </div>

    </div>
  );
  }

export default App;

import React from "react";
const jsonNotes = require("./Notes.json");

const Notes = ({ notes }) => {
  const songNotes = jsonNotes.map(note => {
    return (
      <div id={note.id} key={note.id}>
        <li className="noteAsList">
          <div className="songTitle">{note.Name}</div>
          <pre>
            <br />
            {note.Notes}
          </pre>
        </li>
      </div>
    );
  });

  return <div className="noteStyle">{songNotes}</div>;
};

export default Notes;

import React，{useState}来自“React”；
从“/Notes”导入注释；
导入“/App.css”；
const jsonNotes=require（“./Notes.json”）；
常量应用=（）=>{
const[notes]=useState（[]）；
const handleSubmit=事件=>{
如果（event.key==“输入”）{
日志（event.target.value）；
const obj=jsonNotes.find（item=>item.Name==event.target.value）；
const el=document.getElementById（对象id）；
如果（el）
卷轴视图({
行为：“平滑”，
块：“开始”，
内联：“中心”
});
}
};
返回(
歌曲注释：
);
};
导出默认应用程序；

My Notes.js代码：

import React from 'react';
const Notes = ({notes})=>{
    const jsonNotes = require('./Notes.json');
    const songNotes = jsonNotes.map(note => {
        return(
            <div key={note.id}>
            <li class="noteAsList">

            <div className="songTitle">{note.Name}</div>

            <pre><br></br>{note.Notes}</pre>
            </li>
            </div>
        )
    })

    return(
        <div className="noteStyle">
          {songNotes} 
        </div>
    )
}

export default Notes;

从“React”导入React；
const jsonNotes=require（“./Notes.json”）；
常量注释=（{Notes}）=>{
const-sonnotes=jsonNotes.map（note=>{
返回(

{note.Name}


{note.Notes}

);
});
返回{songNotes}；
};
导出默认票据；

只要复制粘贴代码，我就可以得到这个const el=document.getElementById（id）；然后通过更改const el=document.getElementById（id）；to const el=document.getElementById（notes.id）；我消除了错误，但它不起作用。我的json格式是这样的：[{“id”：0，“Name”：“YamunaiAatrile_DhaLapathi”，“Notes”：“这里的所有注释”}，]@harikrishnan id表示您的元素id，我们在divI中设置的元素id现在更混乱了。你能告诉我在那里我应该出示什么身份证吗？对不起，这让我很困惑。我知道你在告诉div的身份证。。通常以id=“idName”的形式给出。但在这种情况下，我用什么？@harikrishnan你能创建一个代码沙盒并在这里共享吗？我会在那里修复，请所有文件都是指所有ja和json文件是的，当然。很抱歉，我听不懂你说的话。我现在要创建一个沙箱