时间戳

首页 > 解决方案 > 反应形式，如果长度 < 1 则删除先前的状态

reactjs - 反应形式，如果长度 < 1 则删除先前的状态

问题描述

我想制作一个包含多个字段的表单，但我只想填充实际使用的字段，例如在下面的代码中，如果字段的长度超过 1，它会出现，但如果我删除它并它变为 0，然后我不想将数据保持在状态，但是我拥有它的方式，该字段仍然显示 sku: 45FGH, title: "" ，我需要它来摆脱根本没有的数据，就好像它从未填充过一样. 所以在前一种情况下，由于我在标题中输入了一些内容并随后将其删除，我只想保持sku: 45FGH 状态并摆脱title: ""

import React, {useState} from 'react'

function TheForm() {
  const [data, setData] = useState({})
  const handleChange = (e, key) => {
    if(e.target.value.length >= 1) return setData(prevState => {
      return {...prevState, [key]: e.target.value}
    })
  }
  console.log(data);
  return (
    <div>
      <input placeholder="sku" onChange={(e) => handleChange(e, 'sku')}/>
      <input placeholder="title" onChange={(e) => handleChange(e, 'title')}/>
      <input placeholder="location" onChange={(e) => handleChange(e, 'location')}/>
    </div>
  )
}

export default TheForm

主要问题是我使用的是graphql，如果我提供一个字段，它必须包含一些东西，有时我不会使用所有字段，如果我在其中一个字段中错误地输入了一些东西，它会破坏POST请求。

问题是，不是关于被渲染，而是关于保持状态的数据，假设我有 3 个字段，sku、标题和位置。如果我只想要 sku 和 location 输入它并且只有这 2 个字段被创建或添加到状态中，则永远不会添加标题，但是如果我在标题中输入一些内容然后删除它，那么它们中的 3 个现在与标题处于活动状态是空的。这不是我想要的，我需要完全脱离状态的标题。

标签： reactjsformsobjectstate

解决方案

为了避免混乱的代码，你应该尽可能地把逻辑排除在 JSX 之外。在某些情况下，使用条件运算符非常有用，该运算符在不为 true 时返回 null 而不是您的组件。例如：

function TheForm() {
  ...
  return (
    <form>
      { data.sku.length() > 0 ? <input value={data.sku} ... /> : null }
      ...
    </form>
  )
}

推荐阅读