在 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 => {&nbsp; if (e.target.value === '') {&nbsp; &nbsp; // handle if empty&nbsp; &nbsp; this.setState({ word: 'vis' });&nbsp; } else {&nbsp; &nbsp; // business as usual&nbsp; &nbsp; this.setState({ word: e.target.value });&nbsp; }};