React:输入 onChange 以更新状态步骤落后

Posted

技术标签:

【中文标题】React:输入 onChange 以更新状态步骤落后【英文标题】:React: Input onChange to update state step behind 【发布时间】:2019-04-05 17:57:26 【问题描述】:

我有一个带有onChange 属性的输入,它调用一个函数handleChange,它使用输入中输入的新值更新状态。

问题 1 - 当状态记录在 handleChange 的末尾时,它包含旧状态,或者后面有一个输入字母(当您键入“cat”时将记录“ca”)。

问题 2 - 如果没有 event.persist,事件是“合成的”并且不包含值。保留persist 是否可以接受,还是应该采用不同的结构?

输入有:

onChange=this.handleChange

调用函数:

handleChange = (event) => 
    event.persist() // without this the event is 'synthetic'

    const newTerms = ...this.state.terms
    newTerms.text = event.target.value

    this.setState(terms: newTerms)

    console.log('state', this.state) //logs the previous state

this.state.terms.text 应该更改:

this.state = 
    terms: 
        text: '',

【问题讨论】:

【参考方案1】:

状态更新是异步的。你想要的是这样的:

this.setState(terms: newTerms, () => console.log('state', this.state))

即使没有persist,事件也包含事件处理程序中的值。这仅在同步上下文中是正确的,因此您不应将事件传递给 setState 或其他异步方法。

【讨论】:

以上是关于React:输入 onChange 以更新状态步骤落后的主要内容,如果未能解决你的问题,请参考以下文章