如何在 ReactJS 中使用 ref 更新输入值

Question

我有一个输入，我只想使用 ref 更新（不使用 setState）。 构造函数（道具）{ 超级（道具）；

    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>

我有一个函数可以用来增加输入值

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

任何帮助将不胜感激。

谢谢

Answer 1

这就像改变一个普通的字段值。 你可以这样做：

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

Answer 2

解决此问题的第一步是正确传递 ref：

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

那么你应该添加这个Increase函数：

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