- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有 JSON 数组中的 JSON 对象列表。其中每个元素都用 key 唯一标识
JSON 对象包含:
event_name
date_time
{this.props.events.map((event) =>
(
<div key={event.event_name}>
<ul>
<div><h4>{event.event_name}</h4>
<div> //ternary operation next line
{this.state.mic?<span onClick={()=>this.onMicClickOn(event.event_name)}>
<MicOn /> </span> :<span onClick={()=>this.onMicClickOff(event.event_name)}>
<MicOff /> </span>}
</div>
</div>
<li>{event.date_time}</li></ul>
</div>
))}
我有这个状态
constructor(props) {
super(props);
this.state = {
mic : false,
}
}
onMicClickOff=event =>{
this.setState({ mic: true });
}
onMicClickOn =event =>{
this.setState({ mic : false});
}
我只想仅在特定于 event.event_name 时显示麦克风的关闭和打开情况。目前发生的情况是我在 JSON 对象的每个事件上显示麦克风打开和麦克风关闭,而不是单击的对象。而只是唯一 key 。
我知道麦克风状态是全局声明并为所有人声明的问题。但是我可以做些什么来将 event_name 附加到麦克风状态以使其独一无二。
最佳答案
您可以使用状态属性来保持每个单独的事件
的开/关位置,而不是保持通用的位置。
class App extends React.Component {
state = {
micStates: {}
};
handleMicState = id =>
this.setState(current => ({
micStates: { ...current.micStates, [id]: !current.micStates[id] }
}));
render() {
return (
<div>
{this.props.events.map(event => (
<div key={event.event_name}>
<ul>
<div>
<h4>{event.event_name}</h4>
<div>
{this.state.micStates[event.id] ? (
<span onClick={() => this.handleMicState(event.id)}>
<p>On</p>{" "}
</span>
) : (
<span onClick={() => this.handleMicState(event.id)}>
<p>Off</p>{" "}
</span>
)}
</div>
</div>
<li>{event.date_time}</li>
</ul>
</div>
))}
</div>
);
}
}
const events = [
{ id: 1, event_name: "foo", date_time: 12345 },
{ id: 2, event_name: "bar", date_time: 67890 },
{ id: 3, event_name: "baz", date_time: 12345 }
];
ReactDOM.render(<App events={events} />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>
关键部分在这里:
handleMicState = id =>
this.setState(current => ({
micStates: { ...current.micStates, [id]: !current.micStates[id] }
}));
这里发生了两件事。
首先,我们使用 setState 函数而不是直接使用对象。这是因为我们正在使用以前的状态属性来设置新状态。如果我们的新状态依赖于旧状态,这是执行 setState
的建议方法,因为 setState
是异步的。
其次,我们将 event
id
更改为 false/true。在第一个渲染中,micStates
中没有任何内容,因此每个麦克风事件都关闭。第一次点击时,第一个事件的情况如下:
micStates: { 1: true }
等等...
micStates: { 1: true, 2: false, 3: true } // etc.
这是spread syntax .
...current.micStates
[id]: !current.micStates[id]
也许是一个更好的方法:
class App extends React.Component {
state = {
micStates: {}
};
handleMicState = id =>
this.setState(current => ({
micStates: { ...current.micStates, [id]: !current.micStates[id] }
}));
render() {
return (
<div>
{this.props.events.map(event => (
<Event
micState={this.state.micStates[event.id]}
event={event}
onMicState={this.handleMicState}
/>
))}
</div>
);
}
}
const Event = ({ event, onMicState, micState }) => {
const handleClick = () => onMicState(event.id);
return (
<div key={event.event_name}>
<ul>
<div>
<h4>{event.event_name}</h4>
<div>
{micState ? (
<span onClick={handleClick}>
<p>On</p>{" "}
</span>
) : (
<span onClick={handleClick}>
<p>Off</p>{" "}
</span>
)}
</div>
</div>
<li>{event.date_time}</li>
</ul>
</div>
);
};
const events = [
{ id: 1, event_name: "foo", date_time: 12345 },
{ id: 2, event_name: "bar", date_time: 67890 },
{ id: 3, event_name: "baz", date_time: 12345 }
];
ReactDOM.render(<App events={events} />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>
关于javascript - 使用 key 唯一标识每个元素并将 props 更改为 ReactJS 中的该元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53605920/
CFSDN坚持开源创造价值,我们致力于搭建一个资源共享平台,让每一个IT人在这里找到属于你的精彩世界. 这篇CFSDN的博客文章详解dedecms后台编辑器将回车 改为 的方法由作者收集整理,如果你对
关闭。此题需要details or clarity 。目前不接受答案。 想要改进这个问题吗?通过 editing this post 添加详细信息并澄清问题. 已关闭 6 年前。 Improve th
不是将代码放在正文的头部或末尾(我把它放在正文的末尾),如果我将代码放在 JS 文件中而不是在 html 中它自己的脚本标记,是否可以? (我假设它像任何其他代码一样工作正常,但我问以防万一) 最佳答
我尝试执行从\e 命令编写的查询,但现在我无法执行任何查询,但可以在 PSQL 中执行命令。 现在我注意到这一点,我输入的命令现在在\e 中。 当我关闭\e(尝试运行它)时问题开始了。 最佳答案 ps
我有一个这样的字符串($ 字符总是被其他字符包围): a$b c$d e$f 我希望我的字符串方法在 $ 前面放置一个 \ 并删除换行符: a\$bc\$de\$f 我试过了,但它没有放入 \ 字符:
我需要使用 Java 构建一个 XML 文件。问题是我必须使用一些特殊字符,例如“ć”,然后在我的移动应用程序中读取它。 如果我手动更改 ć 就可以正常工作至 ć在我的 XML 文件中的记事
我有一个removeUser 页面,我在其中使用,然后使用submitForm() 函数进行错误处理。这段代码运行得非常好: export default function RemoveUserPag
我在数据库 “2048-05-21” 中有一个看起来像这样的日期 我只想得到年份,在这一年我只想得到两个后面的数字并将两个前面的数字更改为19 example: data : 2048-05-21 1
public class Venus1 { public static void main(String args[]) { int[]x={1,2,3};
我有以下 PHP 脚本,现在我需要在 JavaScript 中做同样的事情。 JavaScript 中是否有类似于 PHP 函数的函数,我已经搜索了好几天但找不到类似的东西?我想做的是计算某个单词在数
这个问题在这里已经有了答案: Is it bad practice to specify an array size using a variable instead of `#define` in
我陷入了一种情况,我必须通过“选中”工具栏中的复选框来“选中”列表中存在的所有复选框。 这是创建复选框列表的代码:- itemTpl: 'checked="checked" /> {groupName
我正在使用Python3。在分析一些网站时,我遇到了一些奇怪的字符并寻找解决方案。我找到了一个,但在找到解决方案之前,我尝试了一些方法,并且知道我无法重置它。当我使用 Jupyter 笔记本将列表 l
我在 http 下有 unity android app 和 site api 的工作基础设施。 最近换了服务器,申请了ssl证书。现在我的 api 在 https 下。 在 unity 应用程序中,
我在 http 下有 unity android app 和 site api 的工作基础设施。 最近换了服务器,申请了ssl证书。现在我的 api 在 https 下。 在 unity 应用程序中,
我在 Objective-C 中有一些代码。我想,我收到了 NSString 类型,但是当我尝试将它保存在核心数据中时,我得到了一个 user.clientID = clientID; 错误,例如:
在表中我有一个名为 CallTime 的字段 (Varchar)。 包括晚上8:00、晚上8:40、上午10:00等时间 我想将字段类型更改为“时间”并更新时间格式。该怎么做? 谢谢 最佳答案 UPD
这个问题在这里已经有了答案: C# - for Loop Freezes at strange intervals (3 个答案) 关闭 6 年前。 我试图解决 problem #14 from P
我今天在 Pycharm 社区版 5.0.3 中收到了这个错误,想知道这是否只是我做错了/没有意识到,或者是 PyCharm lint 问题。重现错误的代码是 mylist = list() # fi
我的目标是将数据库中的随机文本显示到网页上。首先,我不知道为什么我的数据没有保存,为什么我得到的是[Entity of type sec.helloweb.HelloMessage with id:
我是一名优秀的程序员,十分优秀!