How to update input value using ref in ReactJS

Question

I have one input which i want to update using ref only(not using setState). constructor(props) { super(props);

    this.Increase = this.Increase.bind(this)
    this.textInput = React.createRef();
    this.state = {
        inputVal: -1
    };
}

<div>
<input type="number" ref={textInput} placeholder="count"/>
<span onClick={this.Increase}>Increase
</span>
</div>

and i have one function where i want to use to increase input value

Increase(event){
//access ref here and update input value using ref
}

Any help will be appreciated.

Thanks

raphalogou · Accepted Answer · 2022-01-12 06:50:03Z

3

It's just like changing a mere normal field value. You could just do :

Increase(event) {
    event.preventDefault();
    this.textInput.current.value += 1;
}

edited Jan 12, 2022 at 6:50

answered Jan 8, 2021 at 7:50

raphalogou

4684 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

C P Verma Over a year ago

i want to use ref

raphalogou Over a year ago

You're actually using ref (the one you created). Or are you talking about the hook??

Mahdi · Accepted Answer · 2021-01-08 07:59:42Z

1

The first step to fix this problem is to pass the ref properly:

<div>
    <input type="number" ref={this.textInput} placeholder="count"/>
    <span onClick={this.Increase}>Increase</span>
</div>

then you should add this Increase function:

Increase(event) {
    event.preventDefault();
    this.textInput.current.value = "2" //everything you want;
}

answered Jan 8, 2021 at 7:59

Mahdi

1,4051 gold badge14 silver badges29 bronze badges

1 Comment

Mahdi Over a year ago

also you can visit this jsfiddle.net/9bgxr372/12

Collectives™ on Stack Overflow

How to update input value using ref in ReactJS

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related