如何使用映射函数与复选框在ReactJS?

Question

我想使用带有复选框的map函数。我写了这个代码，但它给出了错误。怎么做呢

<div>
<form>
{
data.map((x)=>{
<input type="checkbox" />{x.name}
}) 
}
</form>
</div>

Answer 1

您需要从地图回调return

<div>
<form>
{
data.map((x) => {
return <input type="checkbox" />{x.name}
}) 
}
</form>
</div>

---

，你也可以在input和文本周围添加一个label，这样用户也可以点击文本来突出显示相关的复选框

<div>
<form>
{
data.map((x) => {
return <label><input type="checkbox" />{x.name}</label>
}) 
}
</form>
</div>

Answer 2

在JavaScript中使用箭头函数时，可以显式或隐式地使用return。

明确

<div>
<form>
{
data.map(x => {return <input type="checkbox" />{x.name}})
}
</form>
</div>

隐式

<div>
<form>
{
data.map(x => <input type="checkbox" />{x.name})
}
</form>
</div>

执行以下操作将使data.map(x => {<input type="checkbox" />{x.name}})成为undefined的数组，而不是输入数组。

<div>
<form>
{
data.map(x => {<input type="checkbox" />{x.name}})
}
</form>
</div>

Answer 3

你应该用括号代替大括号

<div>
<form>
{
data.map((x)=>(
<input type="checkbox" />{x.name}
) 
}
</form>
</div>

Answer 4

现在您已经了解了复选框语法，我建议在使用map时使用键。

如果每个项没有唯一的值，请在回调函数中添加索引参数。

import React from "react";
import "./style.css";
export default function App() {
const list = [1,2,3,4,5];
return (
<div>
<ol>
{list.map((item, index) => 
<li key={index}> {item} </li>
)} 
</ol>
</div>
);
}

Answer 5

您应该使用return关键字或隐式返回

<div>
<form>
{
data.map(x=> (
<input type="checkbox" />{x.name}
)) 
}
</form>
</div>