为什么使用onKeyPress时无法更新状态[重复]答案

【问题标题】：Why can't update a state when use onKeyPress [duplicate]为什么使用onKeyPress时无法更新状态[重复]
【发布时间】：2018-08-06 09:01:18
【问题描述】：

请考虑以下代码，当我使用 Keypress 事件处理程序时，我无法更新 inputVal。

import React, { Component, Fragment } from 'react';
import List from './List';
import './ListTodos.css';

class Todos extends Component {
    constructor(props) {
        super(props);
        this.state = { 
            inputVal: null
         }
         this.refInput = null
         this._handleChange = this._handleChange.bind(this)
    }
    _handleChange(pEvt) {
        if (pEvt.keyCode === "13") {
            this.setState({
                inputVal: this.refInput.value
            })
            console.log(this.state.refInput)
        }
    }
    render() { 
        const { text } = this.props;
        return ( 
            <Fragment>
                <div className="form">
                    <input ref={input => {this.refInput = input}} onKeyDown={pEvt => this._handleChange(pEvt)} className="form__input" placeholder={ text } />
                    <div>
                        <List TxtVal={this.state.inputVal} />
                    </div> 
                </div>
            </Fragment>
         )
    }
}

export default Todos;

【问题讨论】：

回车键将触发事件，pEvt.key 等于“Enter”，而不是“13”。注意：我认为this 没有问题。
我编辑了帖子，他没有解决我的问题，值总是不更新，总是在null
fyi keyCode 已弃用，请改用 key。此外，您正在使用箭头函数和绑定，表明您需要了解它们实际在做什么（使用其中一个）。此外，您使用的是 refInput 而不是简单的 pEvt.target.value - 不需要 ref。你也称它为 pEvt，也许暗示你已经从其他语言中继承了这个指针概念（所有对象都通过引用传递）
完成了，在这里发布之前我使用pEvt.key === "enter"，但我忘记了e的大写，所以它解决了我的问题，非常感谢

标签： javascript html css reactjs

【解决方案1】：

我真的不喜欢在 onKeyDown 上使用。相反，您可以使用我认为更好的 onChange。

所以基本上你需要也可以这样做。

class Todos extends Component {
    constructor(props) {
        super(props);
        this.state = { 
            inputVal: null
        }
         this._handleChange = this._handleChange.bind(this)
    }
    
    _handleChange(e) {
        if (e.keyCode === "13") {
            this.setState({
                inputVal: e.target.value
            })
            console.log(e.target.value)
        }
    }
    
    render() { 
        const { text } = this.props;
        return ( 
            <Fragment>
                <div className="form">
                    <input name="todo" onChange={(e) => this._handleChange(e)} className="form__input" placeholder={ text } />
                    <div>
                        <List TxtVal={this.state.inputVal} />
                    </div> 
                </div>
            </Fragment>
         )
    }
}

export default Todos;

【讨论】：

【解决方案2】：

您实际上是在代码中使用 KeyDown 事件，而不是您断言的 KeyPress。看起来您只是想正确获取输入元素的值？

我会为 onchange 事件创建一个处理程序，而不是为输入创建一个处理程序。你只是想获得输入的价值。而且你甚至不需要你的参考。

_handleChange(e) {

        this.setState({
            inputVal: e.target.value
        });            

}
constructor() {
    // wire up your event handler
    this._handleChange = this._handleChange.bind(this);
}
...
<input onChange={this._handleChange} className="form__input" placeholder={ text } />

【讨论】：

【解决方案3】：

使用pEvt.target.value 而不是this.refInput.value

_handleChange(pEvt) {
  if (pEvt.keyCode === "13") {
    this.setState({
      inputVal: pEvt.target.value
    });
    console.log(this.state.inputVal);
  }
}

【讨论】：