反応の開始ボタンでテキストフィールドを無効にする

Question

「開始」ボタンをクリックするか、タイマーが停止したときに入力フィールドが無効になり、誰も入力できない状態になると、状態を無効に設定しますそれは再び "スタート"ボタンをクリックすると、テキストフィールドが再び有効になるように正しく動作しませんでした。私はそれを無効にするか、タイマーが停止した後にのみ有効にする必要があります。

コード：startTimer上

<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: !this.state.disabled}) 
       } 
       } else { 
        this.setState({count: (this.state.count - 1)}) 
       } 
      } 

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

      startTimer() { 
       clearInterval(this.timer) 
       this.timer = setInterval(this.tick.bind(this), 1000) 
       this.setState({disabled: !this.state.disabled}) 
      } 
      stopTimer() { 
       clearInterval(this.timer) 
      } 
      resetTimer() { 
       clearInterval(this.timer) 
       this.setState({count: 0}) 
       this.setState({disabled: !this.state.disabled}) 
      } 
      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

代わりのパス!this.state.disabeld、単にfalseにその値を設定します。再度有効にする必要がある場合は、trueに戻してください。

startTimer() { 
    ... 
    this.setState({ disabled: true }) 
} 

stopTimer() { 
    ... 
    this.setState({ disabled: false }) 
} 

tick() { 
    ... 
    if (this.state.customNumber <= 0) { 
    ... 
    this.setState({ disabled: false }) 
    } 
} 

Answer 2

まず第一に、あなたは状態を持っている必要がありますdisabledと呼ばれる：

constructor (props) { 
    super(props) 
    this.state = {count: 0, customNumber: 0, disabled: false} 
} 

その後だけすることができますthis.setState({disabled: true})（またはfalse）あなたの必要性に応じて。

あなたはまた、this.state.inputValue