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;

我的尝试失败的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===""，也将return放在if语句中，因为一旦if语句再次更改状态，它就会降到下面并将状态更改为空串。使用以下代码将对您有帮助

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

在React.js的组件中设置状态时遇到麻烦

2 个答案: