状态仅在第二次点击时实现

Question

基本上我想在用户单击按钮时将 searchButtonClicked 的状态属性设置为 true。问题是第一次单击按钮时以及用户输入 smth 时。 searchButtonClicked 保持为假 {textInput: "frw", searchButtonClicked: false} 仅在第二次点击时 searchButtonClicked 变为真。{textInput: "frw", searchButtonClicked: true} 什么地方出了错？这是组件：

import React, { Component } from 'react';
import { Redirect } from 'react-router';

class Wikipedia extends Component {
    
    constructor(props) {
    super(props);
   
    this.state = {
      textInput:"",
      searchButtonClicked: false
    }

    this.onTextInput=this.onTextInput.bind(this);
    this.onButtonClicked=this.onButtonClicked.bind(this);
  }

 
  onTextInput(event) {
      this.setState({ 
      textInput: event.target.value
     })
      
  }

  onButtonClicked() {
    this.setState({ 
      searchButtonClicked: true
     })

    console.log(this.state);
  }


  render() {
    return (
    <div>
      <h1> My Wikipedia API App </h1>
      <input type="text"  onChange={this.onTextInput}/>
      <br/>
      <button onClick={this.onButtonClicked}> Search </button>
    </div>
    )
  }


}

export default Wikipedia;

提前致谢和问候

法比安

Answer 1

您还可以使用 async / await 来减少嵌套：

onButtonClicked = async() => {

    await this.setState({ 
        searchButtonClicked: true
    });

    console.log(this.state);
}

状态仅在第二次点击时实现

State only gets actualized on the second cklick

javascript

reactjs

react-router

react-state