我可以在更新 class 组件状态的功能组件中触发 onclick 事件吗？

Question

我正在尝试创建一些 Navbar 下拉按钮，我已经动态添加了这些按钮，并且我正在尝试添加 onclick 事件，该事件只是在 Section 数组中从状态到 setState 切换选定的 button/item/Object。我已经尝试了几乎所有可以从互联网上查找的内容，但错误不断出现。如果有人可以提出解决方案，那将是一个很大的帮助。干杯

import './Intro.css'
import{Dropdown} from 'react-bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css';
var Introbar_=class IntroBar extends Component {
  
    constructor(props) {
        super(props);      
        this.state = { Sections:[{name:'Subject',open:false},{name:'Partner',open:false},{name:'Program',open:false},{name:'Level',open:false},{name:'Availability',open:false},{name:'Language',open:false}],Filters:['Courses','Programs','All']}   
 }
   
    OnbuttonClick=(item)=>e=>{
        console.log(item) 
       return( this.setState(item=>({
      
           item:!item.open
        }))  
    )
    }
    render() { 
        
      
        return ( 
            <div className="Intro-Container">
                <Bg/>
                <SearchBar/>
                <DisplaySections param={this.state.Sections}  onClick={this.OnbuttonClick}/*stateparam={this.state.open} Action={this.handleButtonClick}*//>
                <DisplayFilters param={this.state.Filters} />
            </div>
         );
    }
}
function DisplayFilters(params)
{
    let arr= params.param;
    return(
        <div className="Filter-options">{
        arr.map((item)=>(Filter(item)))
         } </div>
    );
}
function Filter(params) {
    return(
        <button className="Filter">
        {params}
         </button>
    )
    
}
function DisplaySections(params)
{
    let arr=params.param;
    return(
        <div className="Section-options">
           { arr.map((item)=>(Section(item,params.onClick)))}
        </div>
    );
}
function Section(item,onClick)
{
    let arj=item;
    return(
    <button className="Section" onClick={(item)=>onClick(item)}>
        {item.name}
        {console.log(item.name + "Before click " +item.open)}
        {item.open && (CallAddDrop(item.name))}
    </button>
    );
}
function Bg(params) {
    return(
    <div className="Bg">

    </div>
    );
}
function SearchBar(params) {
    return(
    <div>
        <form class="Search-bar">
            <p class="Form-text">Search Courses and Programs</p>
            <input className="input" type="text" value="Computer Science"></input>
            <button class="Button">Search</button>
        </form>
    </div>
    );
}

function CallAddDrop(params)
{
    return ( 
         <div>
             <Dropdown.Item href="#/action-1">{params}</Dropdown.Item>
         </div>
          
      );

}
 
export default Introbar_;

Answer 1

你可以在 React 中使用 props 来实现这一点。

import React, { Component } from 'react'

class IntroBar extends Component {

    constructor(props) {
    super(props);      
    this.state = { Sections:[{name:'Subject',open:false},{name:'Partner',open:false},{name:'Program',open:false},{name:'Level',open:false},{name:'Availability',open:false},{name:'Language',open:false}]}   


    OnbuttonClick = item => {
        console.log(item) 
        this.setState(previousState => ({
            Sections: previousState.Sections.map((section) => {
                if (section.name == item.name) return { name: item.name, open: !item.open };
                else return section;
            }),
        }))  
    )

    render() { 
         return ( 
            <div className="Intro-Container">
                <DisplaySections param={this.state.Sections} onClick={this.OnbuttonClick} />
           
            </div>
         );
    }
}

/*Functional components*/

function DisplaySections(params)
{
    let arr=params.param;
    return(
        <div className="Section-options">
           { arr.map((item)=>(Section(item, params.onClick)))}
        </div>
    );
}

function Section(item, onClick)
{
    let arj=item;
    return(
        <button className="Section" onClick={() => onClick(item)}>
            {item.name}
            {console.log(item.name + "Before click " +item.open)}
            {item.open && (AddDropDownItem(item.name))}
        </button>
    );
}

这样，您的 Section 将调用从 DisplaySections 的 props 传递给它的 onClick 函数，它实际上指的是 OnbuttonClick 中存在的函数IntroBar.

编辑您的 setState 代码

OnbuttonClick = item => {
    console.log(item) 
    this.setState(previousState => ({
        Sections: previousState.Sections.map((section) => {
            if (section.name == item.name) return { name: item.name, open: !item.open };
            else return section;
        }),
    }))  
)

我可以在更新 class 组件状态的功能组件中触发 onclick 事件吗？

Can I trigger a onclick event in a function component which updates the state of a class component?

javascript

setstate

drop-down-menu

reactjs