在函数调用中显示警报不起作用Reactjs答案

【问题标题】：Display Alert inside function call not working Reactjs在函数调用中显示警报不起作用Reactjs
【发布时间】：2020-10-05 14:05:03
【问题描述】：

我正在尝试通过更改按钮点击次数来显示警报。我的代码如下 - 这是我的点击事件

Clicked = () => {
    this.setState({
        count:this.state.count+1
    })
    if(this.state.count >5){
        return <Alerts msg="First"/>
    }else{
        return <Alerts msg="Too much size"/>
    }
}

我的按钮-

 render(){
    return(
        <div>
            <Button onClick={this.Clicked}>Click Me</Button>
        </div>
    )

Alert.js-

export default function Alerts(props) {
         return (
              <div>
                 <Alert severity="warning">{props.msg}</Alert>
              </div>
        );
      }

但我的警报没有显示。谁能帮帮我？

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

修改clicked函数如下：-

Clicked = () => {
    this.setState({
        count:this.state.count+1
    })
}

并在渲染内部添加渲染逻辑alert:-

 render(){
    return(
        <div>
            <Button onClick={this.Clicked}>Click Me</Button>
    {this.state.count >5 ? <Alerts msg="First"/> :  <Alerts msg="Too much size"/>}
        </div>
)

}

编辑：您可以创建一个单独的函数来渲染alert，并像这样调用渲染：-

renderAlert = () => {
  if(this.state.count > 5) return <Alerts msg="First"/>
  return <Alerts msg="Too much size"/>
}


render() { 
          <div>
            <Button onClick={this.Clicked}>Click Me</Button>
            {renderAlert()}
        </div>
 }

【讨论】：

我不想使用条件渲染。有什么办法可以在点击功能中做到这一点？我可能已经嵌套了 if else 所以我不能在条件渲染中添加它
为了将您的元素添加到DOM，您必须在渲染中添加相应的元素。您不能在 onClick 函数中执行此操作，但您可以创建一个新函数，在其中应用逻辑并在渲染中调用该函数。
你能告诉我上面的例子是怎么做的吗？ @maya_nk99
@Preeti 编辑了上述解决方案。

【解决方案2】：

setState 是异步的。因此，您无法在更新后立即访问计数值。此外，您正在尝试从事件处理程序返回组件。您可以将 return 语句分配给某个状态，也可以直接在组件的 return 语句中访问。

render() {
    const alertMessage =
      this.state.count > 5 ? (
        <Alerts msg="First" />
      ) : (
        <Alerts msg="Too much size" />
      );

    return (
      <div>
        <Button onClick={this.Clicked}>Click Me</Button>
        {this.state.count ? alertMessage : null}
      </div>
    );
  }

查看demo

【讨论】：

【解决方案3】：

我的猜测是你将状态的处理和警报的呈现分开。因此，您在 Clicked 函数中处理状态并在渲染中返回警报。所以你会有这样的东西。

class App extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      count: 0
    }
  }

  Clicked = () => {
    // Only handle the setState in the function
    this.setState({
      count: this.state.count + 1
    })
  }


  render() {
    return (
      <div className="App">
        <Button onClick={this.Clicked} variant="contained">Add One</Button>

        <div>Count: {this.state.count}</div>

        {/* Handle displaying Alerts in the render */}
        {
          this.state.count < 5
          ? <Alerts msg="First"/>
          : <Alerts msg="Too much size"/>
        }
      </div>
    );
  }
}

Here's a code sandbox with an example.

【讨论】：