Question

在学习React的同时，我开始创建一个相当简单的项目。 TFL（伦敦交通）的旅程计划者。该应用会获取一些参数，例如自，至和模式（管道，公交车，陆上），然后向TFL API发送API请求。

模式数据由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中处理复选框数据是否正确？对我来说似乎不对。

Answer 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 }
} } })

Answer 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，您可以有一个容器Component，通过将其保存在state中来呈现和控制这三个复选框及其状态（是否选中）。然后，您可以获取这些值，并再次从中创建一个数组并与,联接。

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

2 个答案: