如何在没有 Refs 和 DOM 操作的情况下实现这一点

Question

由于 onChange 不适用于 < p > 标签，我如何使用状态实现以下功能？ 我也可以使用 refs，但是下面的 DOM 操作是最后的选择，对于 React 应用程序来说并不理想。

父类：

 saveNoteAfterEdit(note_id){
        //some code
        const newNote = document.getElementById(note_id).textContent; //works
  }

儿童班：

const displayNotes = notesList.map( (note,note_id) =>
  <p id={ note_id } } > {note} </p>
  <button onClick = { () => this.props.saveNoteAfterEdit(note_id) }> Save </button>
//some code
    );

Answer 1

由于每个笔记都有一个对应的note_id，您可以find与您正在尝试获取的p相关的相应note_id

 const data = [ { note_id: 1, note: "hello" }, { note_id: 2, note: "note2" } ] function App() { const [notesList, setNotesList] = React.useState(data); function saveNoteAfterEdit(note_id){ const {note: newNote} = notesList.find((note)=>note.note_id == note_id) console.log(newNote); } return ( notesList.map(({note, note_id})=>( <div> <p id={note_id} key={note_id}>{note}</p> <button onClick={()=>saveNoteAfterEdit(note_id)}>Do Something</button> </div> )) ) } ReactDOM.render(<App/>, document.getElementById("root"));

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script> <div id="root"></div>