Входное значение сбрасывается при очистке ввода

Question

У меня есть вход в компонент реагирования для хранения имени:

<input key="marker-name" id="marker-name" name="marker-name" onChange={handleRename} type="text" value={name} />

Я написал для него следующий обработчик:

const handleRename = ({ target }) => {
    setPerception({
      ...perception,
      name: target.value
    })
}

Однако он не работает должным образом , если пользователь пытается удалить существующее имя, то, как только последний символ на входе будет удален (т. е. ввод пуст), просто появится предыдущее значение.

Вот полный код компонента:

import React, { useState, useEffect } from 'react'

// import custom styles for child component
import './styles.scss'

const MarkerName = ({ store, onStoreUpdate, callbackFunction }) => {
  const [clicked, setClicked] = useState(false)
  const [perception, setPerception] = useState(null)
  const [currentMarkerName] = useState(store.currentMarkerName)
  const [currentMarkerForce] = useState(store.currentMarkerForce)
  const [currentForce] = useState(store.currentForce)

  // A copy of the store to capture the updates
  const newStore = store

  // Only populate the perception state if it's store value exists
  useEffect(() => {
    store.perception && setPerception(store.perception)
  }, [])

  // Only show the form to non-umpire players who cannot see the correct name
  const clickHander = () =>
    currentForce !== 'umpire' &&
    currentForce !== currentMarkerForce &&
    setClicked(true)

  const handleRename = ({ target }) => {
    setPerception({
      ...perception,
      name: target.value
    })

    newStore.perception.name = target.value
    onStoreUpdate(newStore)
  }

  const handleSubmit = e => {
    e && e.preventDefault()
    callbackFunction(newStore)
  }

  const handleRevert = e => {
    e.preventDefault()
    setPerception({
      ...perception,
      name: null
    })
    newStore.perception.name = null
    onStoreUpdate(newStore)
    handleSubmit()
  }

  const name = perception && perception.name ? perception.name : currentMarkerName

  return (
    <>
      <h2 key="header" onClick={clickHander}>{name}</h2>
      {
        clicked &&
        <div className="input-container marker-name">
          <label>
            Update asset name
            <input key="marker-name" id="marker-name" name="marker-name" onChange={handleRename} type="text" value={name} />
          </label>
          <button type="submit" onClick={handleSubmit}>Rename</button>
          <button onClick={handleRevert}>Revert</button>
        </div>
      }
    </>
  )
}

export default MarkerName

Answer 1

Насколько я могу судить, в этой строке есть проблема:

const name = perception && perception.name ? perception.name : currentMarkerName;

Вы выполняете рендеринг при каждом изменении символа (onChange={handleRename}). Как только все символы удалены, perception && perception.name оценивается как true && false (пустые строки ложные), что равно false. Таким образом, компонент отображается с const name = currentMarkerName. * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *

* * * * * *1011* *1011*

Answer 2

В React формы являются контролируемыми компонентами, вы почти получили его, но в тот момент, когда вы проверили значение восприятия перед присвоением inputValue ... это кажется неправильным.

Не могли бы вы попробовать Чтобы внести эти изменения и увидеть эффект: 1. Для значения состояния восприятия установите начальное значение в виде любой пустой строки: const [perception, setPerception] = useState(null)

При использовании forminput

Функция handleRename может быть объявлена ​​как const handleRename = (e) => {e.target.name: e.target.value}