Question

请考虑以下代码，当我使用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;

Answer 1

使用pEvt.target.value代替this.refInput.value

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

Answer 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 } />

Answer 3

我真的不喜欢在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;

使用onKeyPress时为什么无法更新状态

3 个答案: