当输入为空时弹出警报

Question

我在这里已经多次问过这个问题，但没有得到正确的答案或任何完整的结果。 我需要验证我的输入，或者当我的输入标签为空或输入中没有数字时，可以这样做，警报应该弹出。 我试图发出警报，但不知道为什么它不起作用。 请帮助我一个星期以来一直陷入困境。

码：

<script type="text/jsx">
        var styles = {
            margin: '2em auto',
            width: '300px',
            height: '300px',
            backgroundColor: '#DD4814',
            color: '#ffffff',
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center',
            justifyContent: 'space-around'
        };
        var inputs = {
            position: 'relative',
            bottom: '17%',
            left: '20%'
        }
        var btns = {
            position: 'relative',
            bottom: '7%'
        }
        var btn = {
            backgroundColor: '#ffffff',
            color: '#000000',
            borderColor: '#DEB887',
            borderRadius: '0.4em',
            cursor: 'pointer',
            margin: '0 1em',
            padding: '0.5em',
            display: 'inline-block'
        }
        var required = true;
        class Timer extends React.Component {
            constructor (props) {
                super(props)
                this.state = {count: 0, customNumber: 0}

            }
                handleChange (e) {
                    this.setState({ customNumber: e.target.value});
                }
                componentWillUnmount () {
                    clearInterval(this.timer)
                }
                tick () {
                    if (this.state.customNumber) {
                    this.setState({
                        count: (this.state.customNumber--)
                    })
                    if (this.state.customNumber <= 0) {
                        this.setState({ count: 0})
                        clearInterval(this.timer)
                        this.setState({ disabled: false })
                    }
                    } else {
                        this.setState({count: (this.state.count - 1)})
                    }
                }

                display () {
                    return ('0' + this.state.count % 100).slice(-2)
                }

                startTimer () {
                    if ((this.state.inputValue == " ") && isNaN(this.state.inputValue))
                    {
                        alert("Please give some value in number");
                    }
                    clearInterval(this.timer)
                    this.timer = setInterval(this.tick.bind(this), 1000)
                    this.setState({ disabled: true })
                }
                stopTimer () {
                    clearInterval(this.timer)
                }
                resetTimer () {
                    clearInterval(this.timer)
                    this.setState({count: 0})
                    this.setState({ disabled: false })
                }
                render () {
                    return (
                    <div style={styles} className='timer'>
                        <h1 style={{fontSize: '4em'}}>{this.display()}</h1>
                        <div className="input_text" style={inputs}>
                            <label htmlFor="custom_number">Enter number to start timer</label>
                            <input type="text" name="custom_number" id="custom_number" required={required} value={this.state.inputValue} onChange={this.handleChange.bind(this)} disabled={this.state.disabled}  placeholder="Enter b/w 1-100" />
                        </div>
                        <div style={btns} className="buttons">
                            <button style={btn} type="button" name="start_btn" id="start_btn" onClick={this.startTimer.bind(this)}>Start</button>
                            <button style={btn} type="button" name="stop_btn" id="stop_btn" onClick={this.stopTimer.bind(this)}>Pause</button>
                            <button style={btn} type="button" name="reset_btn" id="reset_btn" onClick={this.resetTimer.bind(this)}>Stop</button>
                        </div>
                    </div>
                    )
                }
                }
                ReactDOM.render(
                <Timer />,
                document.getElementById('root')
                )
        </script>
    <div id="root"></div>

Answer 1

首先，使用警报并不是引起用户注意的最佳方法。 如果您要做的只是调试代码，console.log（）会更加有效

第二件事，您是在计时器循环中请求警报-这样您可能最终会收到数百个警报（请参阅我的第一点）

第三件事，您正在检查this.state.inputValue的值，并将其与包含一个看起来不正确的空格（ " " ）的字符串进行比较

第四件事，您正在使用此命令设置输入字段的值：

value={this.state.inputValue}

这基本上意味着该字段的值已设置且无法更改。 您可能想改用defaultValue

五，我在这里停止，您的handleChange方法甚至没有设置状态，因此您将永远无法获得想要的东西。