Блог

Главная - Вопросы по программированию - Как реализовать это без ссылок и манипуляций с DOM

Как реализовать это без ссылок и манипуляций с DOM

#javascript #html #reactjs

#javascript #HTML #reactjs

Вопрос:

Поскольку onChange не работает для тегов < p > , как я могу реализовать нижеприведенную функциональность с использованием состояний? Я также могу использовать ссылки, но это и нижеприведенные манипуляции с 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
    );

Комментарии:

1. Вы пытаетесь получить содержимое p ? Где note определено и как это меняется?

2. Да, пытаюсь получить содержимое p и это определено здесь const displayNotes = notesList.map( (note,note_id) . Это не проблема, поскольку это работает. Я пытаюсь избавиться от манипуляции с DOM, которая является анти-шаблоном react.

Ответ №1:

Поскольку каждая заметка имеет соответствующий note_id, вы могли бы find соотнести соответствующий note_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>