在 React.js 中設置組件狀態時遇到問題

Question

我有一個叫做word的狀態，它最初設置為visitor 。 該頁面有一個 H1，上面寫着"Hello, {this.state.word}" 。 頁面上有一個輸入，將word的狀態更改為輸入的值。 我想要發生的是，當用戶使用輸入更改Word的狀態時，只需按退格鍵直到頁面輸入為空，就能夠將狀態設置回原來的單詞，即visitor 。

我已經使用了內部條件邏輯試過onChange()函數來說，如果word狀態等於一個空字符串，狀態設置word來visitor 。 由於某種我無法弄清楚的原因，這不起作用。

import React, {Component} from 'react';
import "./Visitor.css";

class Visitor extends Component{
  constructor(props){
    super(props);
    this.state={
      word: 'visitor'
    };
    this.handleChange = this.handleChange.bind(this);
  }
  handleChange(e){
    if(this.state.word === ''){
      this.setState({
        word: 'vis'
      });
  }
    this.setState({
      [e.target.name]: e.target.value
    });
  }

  render(){
    return(
      <div className="Visitor">
          <h1>Hello, {this.state.word}</h1>
          <input type="text"
          onChange={this.handleChange}
          name="word"
          placeholder="Type your name here"/>
          <button>Clear</button>
      </div>
    )
  }
}

export default Visitor;

我的 try 和 failed if 語句沒有錯誤消息，只是沒有正確的結果。 結果應該是在任何時候頁面上的輸入都是空的，“word”的狀態應該是“visitor”。

Answer 1

像你看上去要檢查e.target.value === '' ，而不是this.state.word在handleChange

編輯：您還需要避免用第二個 setState 覆蓋您的第一個 setState，因此您最終的 handleChange 應該看起來像這樣

handleChange = e => {
  if (e.target.value === '') {
    // handle if empty
    this.setState({ word: 'vis' });
  } else {
    // business as usual
    this.setState({ word: e.target.value });
  }
};

Answer 2

在handleChange只需將this.state.word設為e.target.value===""並在 if 語句中return ，因為一旦 if 語句再次更改狀態，它就會降到下方並將狀態更改為空字符串。 使用下面的代碼它會幫助你這樣的

handleChange(e){
    if(e.target.value ===''){
     return this.setState({
        word: 'vis'
      });
  }
    this.setState({
      [e.target.name]: e.target.value
    });
  }