Question

我在react组件中有一个输入来存储名称：

<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

据我所知这是问题所在：

@Injectable(
{
  provide:root
})

您将在每次字符更改（const name = perception && perception.name ? perception.name : currentMarkerName;）时重新呈现。一旦删除所有字符，onChange={handleRename}就会被评估为perception && perception.name的{{1}}（空字符串是虚假的）。因此，该组件使用true && false进行渲染。由于false尚未更改，因此将使用旧名称重新呈现。

改为使用此：

const name = currentMarkerName

Answer 2

在React表单中，表单是受控组件，您几乎可以理解它，但是在那一点上，您先检查了感知的值，然后再分配给inputValue ...这似乎不正确。

您能否尝试进行这些更改，然后让我们看看效果： 1.对于知觉的状态值，请将初始值设为任何空字符串： const [perception, setPerception] = useState(null)

在表单输入上使用
handleRename函数可以声明为 const handleRename = (e) => {e.target.name: e.target.value}

输入清除后输入值复位

2 个答案: