Как сделать так, чтобы по потери фокуса input'ом измененный текст попадал в соответствующий li?

Question

[Ленни Ломми]

function App() {
  const [notes, setNotes] = useState(["1", "2", "3", "4", "5"]);
  const [value, setValue] = useState("");

  function getLiValue(index) {
    setValue(notes[index]);
  }

  /* пытался сделать что-то вроде этого
 но индекс-то undefined, добавляется не то или не так

function getBack(index) {
    setNotes([
      ...notes.slice(0, index),
      (notes[index] = value),
      ...notes.slice(index + 1),
    ]);
  } */

  const result = notes.map((note, index) => {
    return (
      <div>
        <li key={index} onClick={() => getLiValue(index)}>
          {note}
        </li>
      </div>
    );
  });

  return (
    <div>
      <ul>{result}</ul>
      <input
        value={value}
        onChange={(event) => setValue(event.target.value)}
        onBlur={() => getBack()}
      />
    </div>
  );
}

export default App;

Comments

[Kentavr16]

самый простой и логичный способ - создать 1 объект стейта и изменять его. что-то вроде

const [data,setData] = useState({
1:"",
2:"",
3:""
})

где ключ это номер, а значение это заметка. А сейчас ты добавляешь что-то типа нового слоя логики чтобы связать данные и представление.

Answer 1

[0xD34F]

Надо запоминать индекс кликнутого li.

const defaultEdit = {
  index: -1,
  value: '',
};

function App() {
  const [ notes, setNotes ] = useState([...'12345']);
  const [ edit, setEdit ] = useState(defaultEdit);

  const onClick = ({ currentTarget: { dataset: { index } } }) =>
    setEdit({ index: +index, value: notes[index] });

  const onChange = ({ target: { value } }) =>
    setEdit(edit => ({ ...edit, value }));

  const onBlur = () => {
    setNotes(notes => notes.map((n, i) => i === edit.index ? edit.value : n));
    setEdit(defaultEdit);
  };

  return (
    <div>
      <ul>{notes.map((n, i) => (
        <li data-index={i} onClick={onClick}>
          {n}
        </li>))}
      </ul>
      <input value={edit.value} onChange={onChange} onBlur={onBlur} />
    </div>
  );
}

Comments

[Ленни Ломми]

Спасибо, буду изучать)

Answer 2

[Алексей Черемисин]

Здесь бы идеально подошел useReducer.
1) Можно нормально задать состояние компонента,
2) и можно номально все установить через dispatch, никаких getBack() не требуется, все будет в функции-редюсере.

PS., Извиняюсь, примеры приводить не буду, их есть в документации, да и у меня не совсем JS (а clojurescript). Но тем не менее - все тоже самое.

На почитать - https://habr.com/ru/companies/otus/articles/752824/

Comments

[Kentavr16]

или просто стейт объявить логичнее