javascript - ReactJS 中的输入验证 setTimeout

Question

我有一个根据输入是否有效使用 className="error" 或 classname="" 呈现的组件。这样在 CSS 中我可以简单地做 .error { background: red; }。输入的有效性由 isValidNumber(..) 函数确定。但是，现在我遇到的问题是验证过于即时。如果输入无效，它几乎会立即呈现“错误”类名，这是一个烦人的用户体验问题。我希望有某种延迟，以免类立即出现“错误”，比如 0.5 秒会很好。

Demo of component .输入对诸如“23 亿”或“1 万亿”或“203239123”之类的东西有效，但对“2 只羊”或“山”无效。 Github Repo

到目前为止，这是我的组件。您可以看到，每当 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>
        )
    }
}

Answer 1

您需要修复以下代码行:

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);
}