如何在没有引用和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对应的notes_id与您试图获得值的p相关

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>