Disable text field with start button in react

Question

I have a timer on which when i click on "Start" button or when the timer stops the input field will be disabled so no one can enter any value, i set the state to disabled but it didn't work properly as when i again click on "Start" button the text field becomes enabled again. I need to keept it disabled or only enabled after the timer stops.

Code:

<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>

score 0 · Answer 1 · answered Sep 15 '17 at 07:08

0

Instead of pass !this.state.disabeld on startTimer, simply set its value to false. When you need it enabled again, set it back to true.

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

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

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

answered Sep 15 '17 at 07:08

Hemerson Carlin

7,354
1
27
38

Thankns it works and can you tell me why does the counter doesn't count to 1... If i put 5 in my input it goes like 5,4,3,2,0. – Sep 15 '17 at 07:16
Why do you need `customNumber` and `count`? Aren't they supposed to be the same? – Hemerson Carlin Sep 15 '17 at 07:27
Can you correct it where i'm going wrong?I am completely new to react and copied parts from internet to make it one. – Sep 15 '17 at 07:32
I'd use only `count`. Set its value on `onChange` and start the timer from `value` to 0. That should work :) – Hemerson Carlin Sep 15 '17 at 07:44
Didn't worked in that manner could you tell ,me how to validate my input text. – Sep 15 '17 at 08:29
Start with one thing at a time. Did you manage to make the counter work?from 5 to 0 as you described? If the answer is yes, then you can follow field validation by looking as this answer https://stackoverflow.com/questions/18082/validate-decimal-numbers-in-javascript-isnumeric – Hemerson Carlin Sep 15 '17 at 08:31
The counter is not working it skips "1" when i replace all the counterNumber with count the counter doesn't work at all and as i put input it also changes in my counter's main display. – Sep 15 '17 at 08:38

score 0 · Answer 2 · answered Sep 15 '17 at 10:04

First of all, you will need to have a state called disabled:

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

Then only you can this.setState({disabled: true}) (or false) according to your need.

You also have a unnecessary state this.state.inputValue

Disable text field with start button in react

2 Answers2