反应按钮：如何使其更改onClick

Question

我正在学习React，并且正在尝试制作一个按钮，它会在点击时发生变化。根据服务器的回答，它必须是ether“成功”或“不成功”。这是我迄今为止所做的。我的问题是 - handleClick函数必须做什么？我是否应该通过切换类来使用转换？ 谢谢！

class Btn extends React.Component { 
 
    constructor(props) { 
 
    super(props); 
 
    this.handleClick = this.handlenClick.bind(this); 
 
    } 
 

 
    handleClick() { 
 
    ??? 
 
    } 
 
\t 
 
    render() { 
 
    const succeed = (
 
     <div> 
 
     <ButtonToolbar> 
 
      <Button bsStyle="primary" bsSize="large">Succeed</Button> 
 
     </ButtonToolbar> 
 
     </div> 
 
    ) 
 
\t \t 
 
    const notsucceed = (
 
     <div> 
 
     <ButtonToolbar> 
 
      <Button bsStyle="primary" bsSize="large">Not succeed</Button> 
 
     </ButtonToolbar> 
 
     </div> 
 
\t \t) 
 
\t \t 
 
    return (
 
     <div onClick={this.handleClick.bind(this)}> 
 
     {this.state ? succeed : notsucceed} 
 
     </div> 
 
    ) 
 
    } 
 
};

Answer 1

您需要实现的状态。

例如：https://codesandbox.io/s/313vmr23k6

class Btn extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     succeed: false 
    }; 
    this.handleClick = this.handleClick.bind(this); 
    } 

    handleClick() { 
    this.setState(previousState => { 
     return { 
     succeed: !previousState.succeed 
     }; 
    }); 
    } 

    render() { 
    const succeed = (
     <div> 
      <button bsStyle="primary" bsSize="large">Succeed</button> 
     </div> 
    ) 

    const notsucceed = (
     <div> 
     <button bsStyle="primary" bsSize="large">Not Succeed</button> 
     </div> 
    ) 

    return (
     <div onClick={this.handleClick.bind(this)}> 
     {this.state.succeed ? succeed : notsucceed} 
     </div> 
    ) 
    } 
}; 

Answer 2

你会打电话给你的API在那里，如果调用失败或succeeeds根据设定的状态。为此，你的API调用必须返回一个Promise。例如：

handleClick() { 
    Api.call() 
    .then((response) => { this.setState({ succeed: true }); }) 
    .catch((error) => { this.setState({ succeed: false }); }) 
}