反応が空のときにポップアップが表示されます

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

まず最初に、アラートを使用すると、ユーザの注意を取得するための最良の方法ではありません。

2番目のことは、タイマーループでアラートを求めていることです。この方法で何百ものアラートが発生する可能性があります（私の最初の記事を参照してください）。ポイント）

第三の事、あなたがthis.state.inputValueの値をチェックし、右

第四のことを思われない1つのスペース（" "）を含む文字列にそれを比較している、あなたが値を設定しています入力フィールドの次のフィールドに入力します。

value={this.state.inputValue} 

これは、基本的には、フィールドの値が設定されており、変更できないことを意味します。 defaultValue代わりに

5を使用したいと思っています。私はここで停止しています。あなたのhandleChangeメソッドは状態を設定していないので、とにかくあなたが望むものを得ることはありません。