如何在 ReactJS 中使用带复选框的地图功能？

Question

我想将地图功能与复选框一起使用。我已经编写了这段代码，但它给出了错误。怎么做

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

Answer 1

你应该把大括号换成圆括号

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

Answer 2

您需要从地图回调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 3

在 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 4

既然您已经了解了复选框语法，我建议您在使用地图时使用键。

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

 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>

   );
 }

如何在 ReactJS 中使用带复选框的地图功能？

How to use map function with checkbox in ReactJS?

reactjs

mern

map-function

明确

隐式