反应形式,如果长度 < 1 则删除以前的状态
react form, delete previous state if length < 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 个现在与标题一起激活是空的。这不是我想要的,我需要标题完全从状态中消失。
为避免混乱的代码,您应该尽可能将逻辑排除在 JSX 之外。在像这样的某些情况下,当不正确时,使用 Conditional operator that returns null 而不是您的组件很有用。例如:
function TheForm() {
...
return (
<form>
{ data.sku.length() > 0 ? <input value={data.sku} ... /> : null }
...
</form>
)
}
我想出了一个解决方案,我制作了一个单独的对象,它只推送正在使用的字段。
非常感谢尝试过的人!
import React, {useState} from 'react'
function TheForm() {
const [data, setData] = useState({})
const handleChange = (e, key) => {
return setData(prevState => {return {...prevState, [key]: e.target.value}})
}
let _obj = {}
for(let [key, value] of Object.entries(data)){
if(value.length > 1) _obj[key] = value;
}
console.log(_obj);
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
我想制作一个有多个字段的表单,但我只想填充实际正在使用的字段,例如在下面的代码中,如果字段的长度超过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 个现在与标题一起激活是空的。这不是我想要的,我需要标题完全从状态中消失。
为避免混乱的代码,您应该尽可能将逻辑排除在 JSX 之外。在像这样的某些情况下,当不正确时,使用 Conditional operator that returns null 而不是您的组件很有用。例如:
function TheForm() {
...
return (
<form>
{ data.sku.length() > 0 ? <input value={data.sku} ... /> : null }
...
</form>
)
}
我想出了一个解决方案,我制作了一个单独的对象,它只推送正在使用的字段。 非常感谢尝试过的人!
import React, {useState} from 'react'
function TheForm() {
const [data, setData] = useState({})
const handleChange = (e, key) => {
return setData(prevState => {return {...prevState, [key]: e.target.value}})
}
let _obj = {}
for(let [key, value] of Object.entries(data)){
if(value.length > 1) _obj[key] = value;
}
console.log(_obj);
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