Question

class ToggleClick extends React.Component{
    constructor(props){
        super(props)
        this.state = {
            changeText :  "Welcome Zeeshan",    
            changeText1 : "Hello Zeeshan",  
            changeText2 : "Hello World" 
        }           
        this.handleClick = this.handleClick.bind(this); 
    }
    handleClick = (e) => {
        e.preventDefault();
    const id = e.target.id;
    //alert(id);
    this.setState({ changeText: 'Hello Zeeshan' , changeText1 : "Hello Zeeshan 1" , changeText2 : "Hello Zeeshan 3" })
    } 

    render(){
        return(
            <div>
            <h2>Bind Event</h2>
                    <button id="btn1" onClick={this.handleClick}>Click</button>
                    <h4>{this.state.changeText}</h4>
            </div>
        );
    }
}

export default ToggleClick;

Answer 1

setState是异步的。因此，请使用回调。

this.setState({
  changeText: 'Hello Zeeshan' 
}, ()=>console.log(this.state.changeText))

Answer 2

我不确定您的意思，但是如果您想在每次点击时更改文字，您可以这样做：

class ToggleButton extends React.Component {
  constructor(...props) {
    super(...props)
    this.state = {
      textIndex: 0,
      texts: [
        'Hello Zeeshan 1',
        'Hello Zeeshan 2',
        'Hello Zeeshan 3'
      ]
    };
  }
  
  rotateText(){
    const { texts, textIndex } = this.state;
    this.setState({
      textIndex: textIndex < texts.length - 1
      	? textIndex + 1
        : 0
    });
  }

  render() {
    const { texts, textIndex } = this.state;
    return (
    	<button onClick={() => this.rotateText()}>{texts[textIndex]}</button>
    );
  }
}

只需添加一个带有字符串的数组来声明状态并计算一个索引（同样处于状态）。然后，您只需要在数组末尾将计数器重置为0。然后，您可以通过简单地从带有计数器索引的数组中选择字符串来显示文本。

Answer 3

记住 setState 是异步的，说您的状态为（在构造函数中）

this.state = {
   field1: value1, 
   field2: value 2
}

setState的正弦值为：

setState(updater[, callback])

使用setState并可以在任何事件上访问当前状态的合适方法是将第一个参数用作这样的更新程序函数（您无需使用第二个参数）：

this.setState( (state) => {
   return {
    field1: somefunction(state)      // eg. state.field1 + state.field2
    field2: someOtherfunction(state) // eg. state.field2 + 1
   }
});

返回的值是所需的新状态。在您的特定情况下，它就像在构造函数中一样：

this.state = { 
 changeText: "Hello Zeeshan"
}

在点击事件中您将拥有

this.setState((state)=> {
  let parts = state.changeText.split(" ");
  let text = parts[0];
  let counter = 0;
  if (parts.length > 1) {
    counter = parseInt(parts[1]);
  }

  let counter = extractCurrentCounter();
  return {
   changeText: text + ((counter > 0) ? " " + counter : "")
  }
})

当我单击按钮像数组一样的每个按钮时，如何显示setstate值？

3 个答案: