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

【问题标题】：How to use map function with checkbox in ReactJS?如何在 ReactJS 中使用带有复选框的地图功能？
【发布时间】：2022-10-20 08:23:59
【问题描述】：

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

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

【问题讨论】：

标签： reactjs mern map-function

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：

【解决方案3】：

你应该用括号改变花括号

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

【讨论】：

【解决方案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>

   );
 }

【讨论】：

【解决方案5】：

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

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

【讨论】：