<div className="product_rendering_box"> {/* 显示当前页的数据 */} {currentData.map((item) => ( <div key={item.id} className="product_rendering_box_item" onClick={handleClick}> <img src={toolBox} alt="" style={{ width: '145px', height: '105px', margin: '4px 0px 0px 4px', }} /> 如何获取自己点击item各种信息
时间: 2024-02-10 07:21:09 浏览: 20
可以在`handleClick`函数中获取自己点击的item信息,具体方法如下:
1. 给`item`传递一个参数,例如`onClick={() => handleClick(item)}`
2. 在`handleClick`函数中接收这个参数,例如`const handleClick = (item) => { ... }`
3. 在`handleClick`函数中就可以获取`item`的各种信息,例如`item.id`、`item.name`等等,具体根据`item`的数据结构来获取。
相关问题
class Login extends React.Component { state = { play: false, }; getphone = (value) => { console.log(value.length); if (value.length == 11) { this.setState({ play: true, }); } else { this.state.play = false; } }; render() { return ( <div className="login"> <div className="login_head"> <img src={backgroundimg} alt="" /> <div className="headleft"> <Cross></Cross> </div> <div className="headbottom"> <div className="bot_fir">手机号登陆</div> <div className="bot_sec">未注册手机验证后即完成注册</div> </div> </div> <div className="login_sec"> <div className="sec_fir">手机号</div> <input type="text" placeholder="请输入手机号" onChange={(e) => { this.getphone(e.target.value); }} /> <button disabled={this.state.play ? true : false} onClick={() => { console.log("111"); }} > 发送验证码 </button> </div> </div> ); } } export default withRouter(Login);
这段代码是一个React组件,主要实现了一个手机号登陆的功能。在手机号输入框中,当输入的手机号长度为11位时,发送验证码的按钮才可以点击,否则按钮被禁用。
具体实现的步骤如下:
1. 在组件的state中添加一个名为play的状态,初始值为false,表示发送验证码的按钮不可点击。
```
state = {
play: false,
};
```
2. 在手机号输入框的onChange事件处理函数中,通过获取输入框的值,判断手机号长度是否为11位。如果是,则将play状态设置为true,否则设置为false。
```
getphone = (value) => {
console.log(value.length);
if (value.length === 11) {
this.setState({
play: true,
});
} else {
this.setState({
play: false,
});
}
};
```
3. 在发送验证码的按钮中,通过state中的play状态来控制按钮是否可以点击。如果play状态为true,则按钮被禁用,否则按钮可以点击。
```
<button
disabled={this.state.play ? true : false}
onClick={() => {
console.log("111");
}}
>
发送验证码
</button>
```
这样就可以实现在手机号输入框输入11位手机号时,发送验证码的按钮才可以点击的功能。
将这个数据使用react映射到下面的html中{CC:{totalWorkstaion:100,correctWorkstaion:30,seriousWorkstaion:10,normalWorkstaion:20} CK: {totalWorkstaion:100,correctWorkstaion:30,seriousWorkstaion:10,normalWorkstaion:20} SB: {totalWorkstaion:100,correctWorkstaion:30,seriousWorkstaion:10,normalWorkstaion:20} SS:{totalWorkstaion:100,correctWorkstaion:30,seriousWorkstaion:18,normalWorkstaion:20} SV:{totalWorkstaion:100,correctWorkstaion:30,seriousWorkstaion:10,normalWorkstaion:20}} <div className="flex topselect” flist.map((item: string, index:number)=>return titleBox(item, index); 202 /div> div className="box air-con"> <div className="flex software" <div className="flex hardware-number"<div className="number-total"> <TextNumber number={selectedData?.totalworkstaion desc="受控软件总数”/> </div>TextNumber nColor="#0AFFF number=fselectedData?.correcthorkstaion desc="开启”/>ta?.serioushorkstaion ) desc="告警"<TextNumber nColor="#EE3232number=selec时间<TextNumber nColor="#FFFFFFLeuvata?.normalworkstaion ] desc="吴常"number=!selec<TextNumber nColor="rgb255, 255, 255 , 0.4)"number=fselectedData?.closedworkstaion0</div> </div> <div className="software-list flex"> [softList.map((item, index: number) => return <SoftwareItem key=findex! data=fitem) />;
好的,可以尝试以下代码来实现这个映射:
```
import React from "react";
const data = {
CC: {totalWorkstaion: 100, correctWorkstaion: 30, seriousWorkstaion: 10, normalWorkstaion: 20},
CK: {totalWorkstaion: 100, correctWorkstaion: 30, seriousWorkstaion: 10, normalWorkstaion: 20},
SB: {totalWorkstaion: 100, correctWorkstaion: 30, seriousWorkstaion: 10, normalWorkstaion: 20},
SS: {totalWorkstaion: 100, correctWorkstaion: 30, seriousWorkstaion: 18, normalWorkstaion: 20},
SV: {totalWorkstaion: 100, correctWorkstaion: 30, seriousWorkstaion: 10, normalWorkstaion: 20},
};
const TopSelect = () => {
const flist = Object.keys(data);
const titleBox = (item, index) => <div key={index}>{item}</div>;
return <div className="flex topselect">{flist.map((item, index) => titleBox(item, index))}</div>;
};
const TextNumber = ({number, desc, nColor}) => (
<div className="number">
<div className="number-value" style={{color: nColor}}>
{number}
</div>
<div className="number-desc">{desc}</div>
</div>
);
const SoftwareItem = ({key, data}) => (
<div key={key} className="software-item">
<div className="software-name">{key}</div>
<div className="flex hardware-number">
<div className="number-total">
<TextNumber number={data.totalWorkstaion} desc="受控软件总数" />
</div>
<div className="number-correct">
<TextNumber number={data.correctWorkstaion} desc="开启" nColor="#0AFFF" />
</div>
<div className="number-serious">
<TextNumber number={data.seriousWorkstaion} desc="告警" nColor="#EE3232" />
</div>
<div className="number-normal">
<TextNumber number={data.normalWorkstaion} desc="无常" nColor="rgb(255, 255, 255, 0.4)" />
</div>
</div>
</div>
);
const App = () => {
const softList = Object.entries(data);
return (
<div className="box air-con">
<div className="flex software-list">{softList.map(([key, data]) => <SoftwareItem key={key} data={data} />)}</div>
</div>
);
};
export default function MyComponent() {
return (
<div>
<TopSelect />
<App />
</div>
);
}
```
这里定义了 `TopSelect` 组件用于渲染上面的 `flex topselect`,`App` 组件用于渲染下面的 `box air-con` 和 `flex software-list`,还有一个 `SoftwareItem` 组件用于渲染每个软件的详细信息。在 `App` 组件中,我们使用 `Object.entries` 将 `data` 对象转换为一个二元数组,方便遍历。在 `SoftwareItem` 中,我们使用了 `TextNumber` 组件来展示数字和描述信息。