Javascript 如何添加classname"；主动的；在ReactJS中_Javascript_Reactjs

Javascript 如何添加classname"；主动的；在ReactJS中

javascript reactjs

Javascript 如何添加classname"；主动的；在ReactJS中,javascript,reactjs,Javascript,Reactjs,当前代码未成功添加活动的类名，如果要在此部分添加活动的类名，解决方案是什么： <li onClick = (() => onChangeStatus ({status: 'on-hold'})} className = {appState == = {status: 'on-hold'}? "tool-select-item active": "tool-select-item"}> <span className = "

当前代码未成功添加活动的

类名

，如果要在此部分添加活动的

类名

，解决方案是什么：

<li onClick = (() => onChangeStatus ({status: 'on-hold'})} className = {appState == = {status: 'on-hold'}? "tool-select-item active": "tool-select-item"}> <span className = "label-status gray"> On Hold </span> </li>

onChangeStatus（{status:'on hold'}}）className={appState===={status:'on hold'}？“工具选择项目”处于活动状态：“工具选择项目”}>处于保留状态

比如说

我有代码：

import React, { useState }  from 'react';
const List = (props) => {
    const { data} = props;
    const [appState, setAppState]  = useState({
        status:'Choose'
        });

    const onChangeStatus = status => {
        setAppState(status); // remove the curly braces
    };

  if (!data || data.length === 0) return <p>No data order, sorry</p>;
  return (
    <div className="main-dash">
        <div className="status-toolbar">
        <div className="toolicon-wrapper status">
            <button id="#show" className="toolicon status"><span>{appState.status}</span></button>
            <div className="tool-inner">
                <div className="tool-wrapper">
                    <div className="tool-heading">Status</div>
                    <ul className="tool-select">
                        <li onClick={() => onChangeStatus({ status: 'on-hold'})} className={appState === { status: 'on-hold' } ? "tool-select-item active" : "tool-select-item"}><span className="label-status grey">On Hold</span></li>
                        <li onClick={() => onChangeStatus({ status: 'pending'})} className={appState === { status: 'pending' } ? "tool-select-item active" : "tool-select-item"}><span className="label-status orange">Pending</span></li>
                        <li onClick={() => onChangeStatus({ status: 'processing'})} className={appState === { status: 'processing'} ? "tool-select-item active" : "tool-select-item"}><span className="label-status green">Processing</span></li>
                        <li onClick={() => onChangeStatus({ status: 'packing'})} className={appState === { status: 'packing'} ? "tool-select-item active" : "tool-select-item"}><span className="label-status green">Packing</span></li>
                        <li onClick={() => onChangeStatus({ status: 'on-delivery'})} className={appState === { status: 'on-delivery'} ? "tool-select-item active" : "tool-select-item"}><span className="label-status green">On Delivery</span></li>
                        <li onClick={() => onChangeStatus({ status: 'completed'})} className={appState === { status: 'completed'} ? "tool-select-item active" : "tool-select-item"}><span className="label-status blue">Completed</span></li>
                        <li onClick={() => onChangeStatus({ status: 'late'})} className={appState === { status: 'late'} ? "tool-select-item active" : "tool-select-item"}><span className="label-status red">Cut Off</span></li>
                        <li onClick={() => onChangeStatus({ status: 'cancelled'})} className={appState === { status: 'cancelled'} ? "tool-select-item active" : "tool-select-item"}><span className="label-status red">Cancelled</span></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
  );
}
export default List;

import React，{useState}来自“React”；
常量列表=（道具）=>{
const{data}=props；
常量[appState，setAppState]=useState({
状态：'选择'
});
const onChangeStatus=状态=>{
setAppState（状态）；//删除大括号
};
如果（！data | | data.length==0）返回无数据顺序，对不起；
返回(
{appState.status}
地位

onChangeStatus（{status:'on hold'}}）className={appState==={status:'on hold'}？“工具选择项活动”：“工具选择项”}>on hold
onChangeStatus（{status:'pending'}}）className={appState==={status:'pending'}？“工具选择项活动”：“工具选择项”}>pending
onChangeStatus（{status:'processing'}}）className={appState==={status:'processing'}？“工具选择项活动”：“工具选择项”}>processing
onChangeStatus（{status:'packing'}}）className={appState==={status:'packing'}？“工具选择项活动”：“工具选择项”}>packing
onChangeStatus（{status:'on delivery'}}）className={appState==={status:'on delivery'}？“工具选择项活动”：“工具选择项”}>交付时
onChangeStatus（{status:'completed'}}）className={appState==={status:'completed'}？“工具选择项活动”：“工具选择项”}>completed
onChangeStatus（{status:'late'}}）className={appState==={status:'late'}？“工具选择项活动”：“工具选择项”}>切断
onChangeStatus（{status:'cancelled'}}）className={appState==={status:'cancelled'}？“工具选择项活动”：“工具选择项”}>cancelled

);
}
导出默认列表；

您是否在代码中实现过。这将解决活动类名问题
您应该开始学习
从

className={appState==={status:“暂停”}？“工具选择项活动”：“工具选择项”}
到

className={appState.status===“保留”？“工具选择项活动”：“工具选择项”}
问题是您正在比较对象，比较是基于引用的，而不是基于对象的内容。这样，具有相同值的两个对象将不匹配，因为它们具有不同的引用
解决此问题的正确方法是比较
appState.state
值：

className = {appState.state === 'on-hold'? "tool-select-item active": "tool-select-item"
fwiw，您的状态不需要是对象，因为它只包含一个值。此外，您不需要
onChangeStatus
，它的作用与
setAppState
相同。同样，如果愿意，您可以将比较逻辑抽象为函数
建议您重构为：

import React, { useState } from 'react'; const List = (props) => { const { data } = props; const [appState, setAppState] = useState('Choose'); const handleClass = status => appState === status ? "tool-select-item active" : "tool-select-item"; if (!data || data.length === 0) return <p>No data order, sorry</p>; return ( <div className="main-dash"> <div className="status-toolbar"> <div className="toolicon-wrapper status"> <button id="#show" className="toolicon status"><span>{appState}</span></button> <div className="tool-inner"> <div className="tool-wrapper"> <div className="tool-heading">Status</div> <ul className="tool-select"> <li onClick={() => setAppState('on-hold')} className={handleClass('on-hold')}><span className="label-status grey">On Hold</span></li> <li onClick={() => setAppState('pending')} className={handleClass('pending')}><span className="label-status orange">Pending</span></li> <li onClick={() => setAppState('processing')} className={handleClass('processing')}><span className="label-status green">Processing</span></li> <li onClick={() => setAppState('packing')} className={handleClass('packing')}><span className="label-status green">Packing</span></li> <li onClick={() => setAppState('on-delivery')} className={handleClass('on-delivery')}><span className="label-status green">On Delivery</span></li> <li onClick={() => setAppState('completed')} className={handleClass('completed')}><span className="label-status blue">Completed</span></li> <li onClick={() => setAppState('late')} className={handleClass('late')}><span className="label-status red">Cut Off</span></li> <li onClick={() => setAppState('cancelled')} className={handleClass('cancelled')}><span className="label-status red">Cancelled</span></li> </ul> </div> </div> </div> </div> </div> ); } export default List;

import React，{useState}来自“React”；常量列表=（道具）=>{ const{data}=props； const[appState，setAppState]=useState（'Choose'）； const handleClass=status=>appState==status？“工具选择项目激活”：“工具选择项目”；如果（！data | | data.length==0）返回无数据顺序，对不起；返回( {appState} 地位 setAppState（'on-hold'）}className={handleClass（'on-hold'）}>on-hold setAppState（'pending'）}className={handleClass（'pending'）}>pending setAppState（'processing'）}className={handleClass（'processing'）}>processing setAppState（'packing'）}className={handleClass（'packing'）}>packing setAppState（'on-delivery'）}className={handleClass（'on-delivery'）}>on-delivery setAppState（'completed'）}className={handleClass（'completed'）}>completed setAppState（'late'）}className={handleClass（'late'）}>Cut-Off setAppState（'cancelled'）}className={handleClass（'cancelled'）}>cancelled ); } 导出默认列表；
是，请参阅。此实用程序将非常有用