javascript - ReactJS 文本输入

Question

我尝试制作一个小程序，它有一个可以插入文本的输入字段。然后，当您单击“保存”时，它会保存文本并在下面显示。我的问题是，最初在我单击“保存”后，文本没有显示，但仅当我在单击“保存”后对输入字段进行另一次更改时才显示。 在 saveValue 中添加 this.setState({inputText: ' '}) 后，它开始工作，但我不太确定为什么。

import React, {Component} from 'react'
import './App.css';
import picture from './picture.jpg'

class App extends Component {
  state = {
    inputText: '',
    savedValues: [],
  }

  textStorage = (event) => {
    this.setState({
      inputText: event.target.value
    })
  }

  saveValue = (inputText) => {
    this.state.savedValues.push(this.state.inputText)
    this.setState({inputText: ' '}) 
  }
  

  render() {  

  
    return (
      <div className = "App"> 
        <h1>Hello World</h1>
        <input 
          type = "text"
          value = {this.state.inputText}
          onChange = {(event) => this.textStorage(event)}
        />
        <p>Here's your text: {this.state.inputText}</p>
        <button onClick = {this.saveValue}>Save</button>
        <p>{this.state.savedValues.join('')}</p>
        <div>
          <img className = "Picture" src={picture} alt="Picture"/>
        </div>
      </div>
      

    )
  }


}

export default App;

Answer 1

问题

当您将值插入状态对象时，您正在改变状态对象。您没有返回新的数组状态引用，因此 react 不会重新渲染，直到您通过更新输入值并触发重新渲染来实际更新状态。添加更新以清除输入值是触发重新渲染的状态更新。

saveValue = (inputText) => {
  this.state.savedValues.push(this.state.inputText) // <-- mutation!
  this.setState({inputText: ' '}) 
}

解决方案

使用正确的状态更新。 array.prototype.concat 连接一个值并返回一个新的数组引用。

saveValue = () => {
  this.setState(prevState => ({
    savedValues: prevState.savedValues.concat(prevState.inputText),
    inputText: ' ',
  })) 
}

或者，您也可以使用 Spread 语法来创建新数组。

saveValue = () => {
  this.setState(prevState => ({
    savedValues: [...prevState.savedValues, prevState.inputText],
    inputText: ' ',
  })) 
}