在 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 });

  }

};