Javascript ReactJS中的输入验证setTimeout

我有一个组件，根据输入是否有效，以

className=“error”

或

className=“

呈现。这样，在CSS中，我只需执行

.error{background:red；}

。输入的有效性由

isValidNumber（..）

函数确定。然而，现在我面临的问题是，验证太过即时。如果输入无效，它几乎会立即以“错误”类名呈现，这是一个恼人的UX问题。我希望有一个延迟的某种形式，不让类是“错误”，所以立即，像也许0.5秒会很好

。输入在“23亿”、“1万亿”或“203239123”等方面有效，但在“2只羊”或“山”方面无效

这是到目前为止我的组件。您可以看到，每当

isValid

为false时，我尝试使用

setTimeout

和

setState（{isValid:isValid}）

作为函数

export default class NumberInput extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            value: "",
            isValid: false
        };
    }
    setIsValid(isValid) {
        this.setState({ isValid: isValid })
    }
    handleChange(event) {
        var value = event.target.value
        this.setState({ value: event.target.value })

        var isValid = isValidNumber(value)
        if (isValid === false) {
            setTimeout(this.setIsValid(isValid), 2000);
        } else {
            this.setIsValid(isValid)
        }
    }
    getClassName() {
        var className = ''
        var errorClass = ''

        // Generate error classes based on input validity.
        if (this.state.isValid) {
            errorClass = ''
        } else {
            errorClass = 'error'
        }

        className = 'number-input ' + errorClass
        return className
    }
    render() {
        return (
            <div>
                <input type="text" className={this.getClassName()} value={this.state.value} onChange={this.handleChange.bind(this)} placeholder="Enter a number"/>
                <RawNumber isValid={this.state.isValid} value={this.state.value} />
            </div>
        )
    }
}

导出默认类号put扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
值：“”，
isValid:false
};
}
setIsValid（isValid）{
this.setState（{isValid:isValid}）
}
手变（活动）{
var值=event.target.value
this.setState（{value:event.target.value}）
变量isValid=isValidNumber（值）
if（isValid==false）{
setTimeout（this.setIsValid（isValid），2000）；
}否则{
此.setIsValid（isValid）
}
}
getClassName（）{
var className=“”
var errorClass=''
//根据输入有效性生成错误类。
if（this.state.isValid）{
errorClass=“”
}否则{
errorClass='error'
}
className='数字输入'+errorClass
返回类名
}
render（）{
返回(
)
}
}

您需要修复以下代码行：

if (isValid === false) {
    setTimeout(this.setIsValid(isValid), 2000);
}

您在这里所做的，基本上是立即调用this.setIsValid并将结果传递给setTimeout。因此，状态会立即改变

您想要做的是将函数本身传递给setTimeout，而不是结果。为此，您需要将this.setIsValid包装到函数包装器中，如下所示：

if (isValid === false) {
    setTimeout((function() {
        this.setIsValid(isValid);
    }).bind(this), 2000);
}

---

您需要修复以下代码行：

if (isValid === false) {
    setTimeout(this.setIsValid(isValid), 2000);
}

您在这里所做的，基本上是立即调用this.setIsValid并将结果传递给setTimeout。因此，状态会立即改变

您想要做的是将函数本身传递给setTimeout，而不是结果。为此，您需要将this.setIsValid包装到函数包装器中，如下所示：

if (isValid === false) {
    setTimeout((function() {
        this.setIsValid(isValid);
    }).bind(this), 2000);
}

---

您需要修复以下代码行：

if (isValid === false) {
    setTimeout(this.setIsValid(isValid), 2000);
}

您在这里所做的，基本上是立即调用this.setIsValid并将结果传递给setTimeout。因此，状态会立即改变

您想要做的是将函数本身传递给setTimeout，而不是结果。为此，您需要将this.setIsValid包装到函数包装器中，如下所示：

if (isValid === false) {
    setTimeout((function() {
        this.setIsValid(isValid);
    }).bind(this), 2000);
}

---

您需要修复以下代码行：

if (isValid === false) {
    setTimeout(this.setIsValid(isValid), 2000);
}

您在这里所做的，基本上是立即调用this.setIsValid并将结果传递给setTimeout。因此，状态会立即改变

您想要做的是将函数本身传递给setTimeout，而不是结果。为此，您需要将this.setIsValid包装到函数包装器中，如下所示：

if (isValid === false) {
    setTimeout((function() {
        this.setIsValid(isValid);
    }).bind(this), 2000);
}

---

我只想为

background color

属性向

.error

类添加一个转换

.error {
  background-color: red;
  transition: background-color .5s ease;
}

如果您想延迟转换，您可以在声明末尾附加一个值。以下情况将使转换延迟1秒：

.error {
  background-color: red;
  transition: background-color .5s ease 1s;
}

我只是重读了你的问题。如果您想在JS中也执行延迟，或者代替CSS，那么您需要将

handleChange

方法更改为以下内容

handleChange(event) {
    var value = event.target.value
    this.setState({ value: event.target.value })

    var isValid = isValidNumber(value)
    if (isValid === false) {
        setTimeout(this.setIsValid.bind(this, isValid), 2000);
    } else {
        this.setIsValid(isValid)
    }
}

---

我只想为

background color

属性向

.error

类添加一个转换

.error {
  background-color: red;
  transition: background-color .5s ease;
}

如果您想延迟转换，您可以在声明末尾附加一个值。以下情况将使转换延迟1秒：

.error {
  background-color: red;
  transition: background-color .5s ease 1s;
}

我只是重读了你的问题。如果您想在JS中也执行延迟，或者代替CSS，那么您需要将

handleChange

方法更改为以下内容

handleChange(event) {
    var value = event.target.value
    this.setState({ value: event.target.value })

    var isValid = isValidNumber(value)
    if (isValid === false) {
        setTimeout(this.setIsValid.bind(this, isValid), 2000);
    } else {
        this.setIsValid(isValid)
    }
}

---

我只想为

background color

属性向

.error

类添加一个转换

.error {
  background-color: red;
  transition: background-color .5s ease;
}

如果您想延迟转换，您可以在声明末尾附加一个值。以下情况将使转换延迟1秒：

.error {
  background-color: red;
  transition: background-color .5s ease 1s;
}

我只是重读了你的问题。如果您想在JS中也执行延迟，或者代替CSS，那么您需要将

handleChange

方法更改为以下内容

handleChange(event) {
    var value = event.target.value
    this.setState({ value: event.target.value })

    var isValid = isValidNumber(value)
    if (isValid === false) {
        setTimeout(this.setIsValid.bind(this, isValid), 2000);
    } else {
        this.setIsValid(isValid)
    }
}

---

我只想为

background color

属性向

.error

类添加一个转换

.error {
  background-color: red;
  transition: background-color .5s ease;
}

如果您想延迟转换，您可以在声明末尾附加一个值。以下情况将使转换延迟1秒：

.error {
  background-color: red;
  transition: background-color .5s ease 1s;
}

我只是重读了你的问题。如果您想在JS中也执行延迟，或者代替CSS，那么您需要将

handleChange

方法更改为以下内容

handleChange(event) {
    var value = event.target.value
    this.setState({ value: event.target.value })

    var isValid = isValidNumber(value)
    if (isValid === false) {
        setTimeout(this.setIsValid.bind(this, isValid), 2000);
    } else {
        this.setIsValid(isValid)
    }
}

---

setTimeout（this.setIsValid.call（this.isValid），2000）是错误的。你的意思是用
.bind
而不是
.call
？@FelixKling是的，我的错。谢谢大家!<代码>设置超时（this.setIsValid.call（this.isValid），2000）是错误的。你的意思是用
.bind
而不是
.call
？@FelixKling是的，我的错。谢谢大家!<代码>设置超时（this.setIsValid.call（this.isValid），2000）是错误的。你的意思是用
.bind
而不是
.call
？@FelixKling是的，我的错。谢谢大家!<代码>设置超时（this.setI