问题描述
我使用一个受控的文本字段，以便侦听此字段中值的变化并在大写或小写请求输入的情况下强制使用该值。
所以我必须使用组件状态的value属性。
不幸的是，如果我在另一个Redux组件中使用此组件，并且想通过连接到Redux全局状态的属性更新此字段，我不知道如何。
如果我使用组件的属性来为受控字段赋值，则在该字段的onChange之后，我将丢失与条目链接的修改（因为我没有按状态对值进行赋值）。
如果我在受控字段的评估中使用状态，则不会检索Redux道具提供的值。 有什么想法吗？
我的组件的简化代码段：
composer require stripe/stripe-PHP
解决方法
您希望组件通过props获取和更改其值，而不是将值存储在本地状态。这样，组件无需知道或关心该值是来自redux还是来自另一个组件的状态。
如果愿意，您可以保留本地状态，但是如果<p class="rtecenter"><iframe align="middle" frameborder="0" height="380" name="December 2020 eclipse animation" scrolling="no" src="https://c.tadst.com/gfx/eclipses2/20201214/anim2d-380.mp4" style="border:1px solid #aaa;" width="760"></iframe></p>
发生变化，则希望library(raster)
library(rasterVis)
#Adapted density plot function#
dp <- function(x,data = NULL,layers,FUN,maxpixels = 1e+05,xlab = '',ylab = '',main = '',par.settings = rasterTheme(),auto.key = list(columns = 4,space = "top"),...) {
if (!missing(layers)) x <- subset(x,layers)
nl <- nlayers(x)
if (nl > 1) {
dat <- raster2dat(x,maxpixels)
p <- densityplot(~values,data = dat,groups = ind,breaks = 100,par.settings = par.settings,pch = '.',xlab = xlab,ylab = ylab,main = main,auto.key = auto.key,panel = panel.superpose,panel.groups = function(x,group.value,col.line,...) {
panel.densityplot(x,col.line = col.line,plot.points = FALSE,...)
# d <- density(x,na.rm = TRUE)
# i <- which.max(d$y)
# ltext(d$x[i],d$y[i],# group.value,# adj = c(0.3,0),# col = col.line,# cex = 0.7)
})
} else {
p <- densityplot(x,maxpixels = maxpixels,xlab=xlab,ylab=ylab,...)
}
p
}
#raster2dat function from the RaserVis package#
raster2dat <- function(x,maxpixels){
nl <- nlayers(x)
if (maxpixels < ncell(x)) {
dat <- sampleRandom(x,maxpixels)
} else {
dat <- getValues(x)
}
if (nl>1){
dat <- as.data.frame(dat)
##http://r.789695.n4.nabble.com/Column-order-in-stacking-unstacking-td3349953.html
idx <- sprintf("%s%03d","X",1:nl)
names(dat) <- idx
dat <- stack(dat)
z <- getZ(x)
if (!missing(FUN) & !is.null(z)){
FUN <- match.fun(FUN)
dat$ind <- factor(FUN(z))[dat$ind]
} else {
nms <- names(x)
nms <- reorder(factor(nms),1:nl)
dat$ind <- nms[dat$ind]
}
dat
} else {
dat ##nl==1 --> raster2dat gives a vector
}
}
#Test
f <- system.file("external/test.grd",package="raster")
r <- raster(f)
s <- stack(r,r-500,r+500,r - 120)
dp(s)
成为事实的唯一来源，并更新本地状态。
我建议您添加一个道具props.value，该道具将是一个props.value函数，需要一个setValue。当void发生变化时，我们将对新值应用正确的格式，然后使用新的格式化值调用string。
关于您的代码的一些注释：
- 您可以使用传播运算符一次将大量道具传递给
TextField，而不必将它们全部单独分配 - 您不应将元素分配给
setValue。直接将其退回。
这是一个作为功能组件的简单版本。此组件接受TextField的所有有效道具并将其传递。我们会在每次输入更改时都强制使用大小写，但是请注意，我们不会检查初始值的大小写，也不会检查它是否由于外部原因而更改。
const element如果TextField与格式不正确，我们可以使用import React from "react";
import { TextField,TextFieldProps } from '@material-ui/core';
type MyInputProperties = TextFieldProps & {
textTransform?: "uppercase" | "lowercase";
setValue(value: string): void;
value?: string;
}
export const CaseEnforcingInput = ({value = '',setValue,textTransform,...props}: MyInputProperties) => {
const formatValue = (value?: string): string | undefined => {
let curValue = value;
if (curValue && textTransform) {
if (textTransform === 'uppercase') {
curValue = curValue.toUpperCase();
} else if (textTransform === 'lowercase') {
curValue = curValue.toLowerCase();
}
}
return curValue;
}
const handleChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
const value = event.target.value;
setValue( formatValue(value) );
}
return (
<TextField
{...props} // pass though all other props
onChange={handleChange}
value={value}
//inputProps={{ style: { textTransform: textTransform } }}
/>
)
};
/ componentDidMount来调用具有正确格式值的useEffect。我们还想检查setValue何时更改。我们可以检查props.value的更改，但是我们需要注意这一更改，因为如果处理不正确，很容易创建无限循环。
对不起，我是搞砸了的人。我不需要在输入中存储状态。使用状态时，我的字段显示为道具中存在的值。突然我失去了用户输入...我很愚蠢。 感谢琳达的回答，这让我有所反应。