React - 我如何正确处理复选框数据答案

【问题标题】：React - How do I handle checkbox data correctlyReact - 我如何正确处理复选框数据
【发布时间】：2019-07-17 08:47:23
【问题描述】：

在学习 React 时，我开始创建一个相当简单的项目。 TFL（伦敦交通）的旅程规划器。该应用程序获取一些参数，例如 From、To 和 mode（Tube、Bus、Overground），并向 TFL API 发送 API 请求。

模式数据由 tube、bus 和 overground 3 个复选框组合在一起。它应该作为字符串发送，每个单词之间用逗号分隔。像地铁、公共汽车、地上或只有公共汽车、地上等的东西。

这是我处理复选框值的方式：

// Handling checkboxes
    const tubeVal = e.target.elements.tube.checked === true ? "tube" : "";
    const busVal = e.target.elements.bus.checked === true ? "bus" : "";
    const overgroundVal = e.target.elements.overground.checked === true ? "overground" : "";

    let mode = "";
    if (tubeVal && !busVal && !overgroundVal) {
      mode = tubeVal;
    }
    if (!tubeVal && busVal && !overgroundVal) {
      mode = busVal;
    }
    if (!tubeVal && !busVal && overgroundVal) {
      mode = overgroundVal;
    }
    if (tubeVal && busVal && !overgroundVal) {
      mode = tubeVal + "," + busVal;
    }
    if (tubeVal && !busVal && overgroundVal) {
      mode = tubeVal + "," + overgroundVal;
    }
    if (!tubeVal && busVal && overgroundVal) {
      mode = busVal + "," + overgroundVal;
    }
    if (tubeVal && busVal && overgroundVal) {
      mode = tubeVal + "," + busVal + "," + overgroundVal;
    }

这是在 React 中处理复选框数据的正确方法吗？我觉得不太合适。

【问题讨论】：

标签： reactjs forms checkbox

【解决方案1】：

您的代码可以大大缩短为一行：

const mode = ['tube', 'bus', 'overground'].filter(key => e.target.elements[key].checked).join(',');

我们首先使用您希望获取的每个元素名称创建一个数组，filter 排除未检查的元素，然后使用join 将所有剩余名称与, 组合在一起组成我们的最终字符串。

您现在可以将 mode 变量存储在您的状态中以供以后在渲染中使用。

工作演示：

function test(e) {
    const mode = ['tube', 'bus', 'overground'].filter(key => e.target.elements[key].checked).join(',');

    console.log('Mode : ', mode);
    return mode;
}

test({ target: { elements: { 
    tube: { checked: true },
    bus: { checked: false },
    overground: { checked: true }
} } })

test({ target: { elements: { 
    tube: { checked: true },
    bus: { checked: true },
    overground: { checked: true }
} } })

test({ target: { elements: { 
    tube: { checked: true },
    bus: { checked: true },
    overground: { checked: false }
} } })

test({ target: { elements: { 
    tube: { checked: false },
    bus: { checked: false },
    overground: { checked: false }
} } })

【讨论】：

天哪！多么酷啊？谢谢@Treycos。我真的需要在状态中保存模式吗？在这个简单的项目中，我不需要将它们传递给任何其他组件。我还应该把它保存在商店里吗？
好吧，没有什么是强迫你，这完全取决于你想用它实现什么。由于您使用的是 redux 商店，因此您可以将其放在那里

【解决方案2】：

我会创建一个包含我想要的字段名称的数组，然后过滤选中的名称，然后将它们的值添加到一个数组中并加入 ,。

类似的东西

function handleCheckboxes(e) {
  e.preventDefault();
  // Handling checkboxes
  const checkboxes = ['tube', 'bus', 'overground'];
  const nodes = checkboxes.map(name => e.target.elements[name]);
  const values = nodes.filter(node => node.checked).map(node => node.value);
  const mode = values.join(',');
  alert(mode);
}

// for demo
document.querySelector('form').addEventListener('submit', handleCheckboxes);

<form>
  <input type="checkbox" name="tube" value="tube" />
  <input type="checkbox" name="bus" value="bus" />
  <input type="checkbox" name="overground" value="overground" />

  <button type="submit" id="check">check</button>
</form>

特别是对于 React，您可以拥有一个容器组件，通过将其存储在 state 中来呈现和控制三个复选框及其状态（选中或未选中）。然后您可以获取这些值，并再次从中创建一个数组并加入 ,。

【讨论】：