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

Question

当我学习React时，我开始创建一个相当简单的项目。伦敦交通运输公司的旅行策划人。该应用程序获取一些参数，如从、到、模式(管、总线、地上)，并向TFL发送一个API请求。

模式数据是由3个复选框，管，bus和地上组合而成。它应该以字符串的形式发送，每个单词之间都有逗号。如地铁、公交车、地面或仅公共汽车、地面等。

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

// 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(',');

我们首先使用您想要取的每个元素名称创建一个数组，将未被检查的元素过滤器出来，然后使用,使用join组合最后一个字符串，并将所有剩余的名称与一个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，您可以使用一个容器组件来呈现和控制三个复选框及其状态(选中与否)，方法是将其存储在state中。然后，您可以获得这些值，并再次从它们创建一个数组并与,连接。