Fatal编程技术网
  • reactjs/
  • 可以直接从Reactjs中的处理事件函数返回组件吗？

可以直接从Reactjs中的处理事件函数返回组件吗？

reactjs bootstrap-4

可以直接从Reactjs中的处理事件函数返回组件吗？,reactjs,bootstrap-4,Reactjs,Bootstrap 4,我有一个表格可以添加一个类别。我希望当点击add按钮时，如果输入为空，角落屏幕会显示一个通知。我的想法是返回HandLeadNewCategory（）中包含toast的组件（或函数），但它没有显示出来。我知道库react bootstrap可以像这样显示toast handleAddNewCategory(){ if(condition) return toastr.info("message",...); } 但我现在不想用它。谁能给我一个解决方案，只使用引导解决这个问题。我是个新手 这

我有一个表格可以添加一个类别。我希望当点击add按钮时，如果输入为空，角落屏幕会显示一个通知。我的想法是返回
HandLeadNewCategory（）中包含toast的组件（或函数）
，但它没有显示出来。我知道库react bootstrap可以像这样显示toast

handleAddNewCategory(){
if(condition)
  return toastr.info("message",...);
}
但我现在不想用它。谁能给我一个解决方案，只使用引导解决这个问题。我是个新手

这是一些最小的文件：

import React, { Component } from "react";
import AddNewCategory from "./AddNewCategory";
import Notification from "./Notification";

class CategoryList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      categoryNameInput: "",
      categoryDescriptionInput: "",
    };
  }
  ...
  handleAddNewCategory = () => {
    const { categoryNameInput, categoryDescriptionInput } = this.state;
    if (categoryNameInput.trim() === "") {
      return <Notification message="Please enter category name" />;
    }
    if (categoryDescriptionInput.trim() === "") {
      return <Notification message="Please enter category description" />;
    }
  };
  render() {
    return (
      <div className="container">
        ...
          <AddNewCategory handleAddNewCategory={this.handleAddNewCategory} />
        ...
      </div>
    );
  }
}
export default CategoryList;

import React，{Component}来自“React”；
从“/AddNewCategory”导入AddNewCategory；
从“/Notification”导入通知；
类CategoryList扩展了组件{
建造师（道具）{
超级（道具）；
此.state={
categoryNameInput:“”，
categoryDescriptionInput:“”，
};
}
...
handleAddNewCategory=（）=>{
const{categoryNameInput，categoryDescriptionInput}=this.state；
如果（categoryNameInput.trim（）=“”）{
返回；
}
如果（categoryDescriptionInput.trim（）=“”）{
返回；
}
};
render（）{
返回(
...
...
);
}
}
导出默认类别列表；
通知组件

import React, { Component } from "react";

class Notification extends Component {
  render() {
    const myStyle = {
      zIndex: "1001",
      position: "absolute",
      top: "10px",
      right: "10px",
    };
    return (
      <div className="toast col-2" style={myStyle} data-autohide="false">
        <div className="toast-header">
          <strong className="mr-auto text-primary">Notice</strong>
        </div>
        <div className="toast-body">{this.props.message}</div>
      </div>
    );
  }
}
export default Notification;

import React, { Component } from "react";

class Notification extends Component {
 render() {
 const myStyle = {
  zIndex: "1001",
  position: "absolute",
  top: "10px",
  right: "10px",
 };
 return (
  <div hidden={this.props.showToast} className="toast col-2" style={myStyle} data-autohide="false">
    <div className="toast-header">
      <strong className="mr-auto text-primary">Notice</strong>
    </div>
    <div className="toast-body">{this.props.message}</div>
  </div>
 );
}
}
export default Notification;

import React，{Component}来自“React”；
类通知扩展了组件{
render（）{
常量myStyle={
zIndex：“1001”，
位置：“绝对”，
顶部：“10px”，
右：“10px”，
};
返回(
注意
{this.props.message}
);
}
}
出口违约通知；
index.html

<!DOCTYPE html>
<html lang="en">
<head>
    ...
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>
<body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
    <script>
        $(document).ready(function() {
            $('.toast').toast('show');
        });
    </script>
</body>
</html>


...
您需要启用JavaScript才能运行此应用程序。
$（文档）.ready（函数（）{
$（'.toast'）.toast（'show'）；
});
不要使用jquery来显示toast，这不是最佳实践，您可以做的是有条件地呈现组件，而不是有条件地呈现组件。只需渲染一个，然后控制其可见性

请遵循以下代码：-

通知组件

import React, { Component } from "react";

class Notification extends Component {
  render() {
    const myStyle = {
      zIndex: "1001",
      position: "absolute",
      top: "10px",
      right: "10px",
    };
    return (
      <div className="toast col-2" style={myStyle} data-autohide="false">
        <div className="toast-header">
          <strong className="mr-auto text-primary">Notice</strong>
        </div>
        <div className="toast-body">{this.props.message}</div>
      </div>
    );
  }
}
export default Notification;

import React, { Component } from "react";

class Notification extends Component {
 render() {
 const myStyle = {
  zIndex: "1001",
  position: "absolute",
  top: "10px",
  right: "10px",
 };
 return (
  <div hidden={this.props.showToast} className="toast col-2" style={myStyle} data-autohide="false">
    <div className="toast-header">
      <strong className="mr-auto text-primary">Notice</strong>
    </div>
    <div className="toast-body">{this.props.message}</div>
  </div>
 );
}
}
export default Notification;

import React，{Component}来自“React”；
类通知扩展了组件{
render（）{
常量myStyle={
zIndex：“1001”，
位置：“绝对”，
顶部：“10px”，
右：“10px”，
};
返回(
注意
{this.props.message}
);
}
}
出口违约通知；
组件使用通知：-

class CategoryList extends Component {
 constructor(props) {
  super(props);
  this.state = {
    categoryNameInput: "",
    categoryDescriptionInput: "",
    toastMessage:'',
    showToast:false
  };
 }
...
handleAddNewCategory = () => {
  const { categoryNameInput, categoryDescriptionInput } = this.state;
  if (categoryNameInput.trim() === "") {
    this.setState({
     toastMessage:'Please enter category name',
     showToast:true
    })

  }
  if (categoryDescriptionInput.trim() === "") {
     this.setState({
       toastMessage:'Please enter category name',
       showToast:true
     })
  }
};
render() {
  return (
    <div className="container">
      <Notification message={this.state.toastMessage} showToast={this.state.showToast}/>;
      ...
        <AddNewCategory handleAddNewCategory={this.handleAddNewCategory} />
      ...
    </div>
  );
}
}
export default CategoryList;

类类别列表扩展组件{
建造师（道具）{
超级（道具）；
此.state={
categoryNameInput:“”，
categoryDescriptionInput:“”，
演讲信息：''，
showtoots:错误
};
}
...
handleAddNewCategory=（）=>{
const{categoryNameInput，categoryDescriptionInput}=this.state；
如果（categoryNameInput.trim（）=“”）{
这是我的国家({
演讲信息：'请输入类别名称'，
真的吗
})
}
如果（categoryDescriptionInput.trim（）=“”）{
这是我的国家({
演讲信息：'请输入类别名称'，
真的吗
})
}
};
render（）{
返回(
;
...
...
);
}
}
导出默认类别列表；
在这里，我要做的是在状态中初始化布尔值并启用它，这样toast将可见，我直接传递它并抛出道具，这样每当消息和布尔值发生更改时，它就会自动反映在通知控制器中

要删除toast，只要将{showToast}设置为false即可。并从代码中删除jquery部分

哦，谢谢，我知道了。它们只渲染一次，我们使用状态设置其可见性。我试试看