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方法甚至没有设置状态，所以你永远不会得到你想要的东西。

当反应中输入为空时弹出警报

1 个答案: