如何获取选中复选框的值并将其输出到输入字段

Question

我正在尝试获取复选框的选中值，然后将它们显示在字段中。我有两个文件，一个是具有输入字段的索引，然后是在一个不同组件 selectlanguage 的模态中创建复选框。我希望当用户选中一个或多个复选框时，值会出现在输入中，而当未选中时，值会离开该字段。

目前，我能实现的只是在输入字段中出现一个值。

这是代码片段。

index.js

import React, { useState } from "react";
import SelectLanguage from "../../components/modal/selectLanguage";

const index = () => {
const [chosenLanguage, setChosenLanguage] = useState([]);

function checkLanguage(e) {
  setChosenLanguage(e.target.name);
};

<label className="relative block p-3 border-b-2 border-gray-200 w-full" for="languages">
  <span for="languages">languages</span>
  <input
    id="languages"
    type="text"
    placeholder="Spanish, Arabic"
    autoComplete="off"
    onClick={languageShowModal}
    value={chosenLanguage}
  />
</label>
}

export default index;

selectlanguage.js

import { useState } from "react";

export default function SelectLanguage({ open, handleClose, checkLanguage }) {
  const handleCheckbox = (e) => {
    alert(e.target.name);
  };

  return open ? (
    <div>
      <label>
        <input type="checkbox" name="spanish" onChange={checkLanguage} />
        <span>spanish</span>
      </label>
      <label>
        <input type="checkbox" name="spanish" onChange={checkLanguage} />
        <span>french</span>
      </label>
      <label>
        <input type="checkbox" name="spanish" onChange={checkLanguage} />
        <span>arabic</span>
      </label>
    </div>
  ) : (
    ""
  );
}

Answer 1

我不太清楚你是如何连接起来的，但一个好的策略是反映 DOM 的状态到你的 React 状态(Controlled Components)，然后有一种显示该状态的方法。在您的情况下，您想要存储一堆复选框的状态，一种方法是使用地图。

export const MyComponent = () => {
  const [ chosenLanguages, setChosenLanguages ] = useState({})

  const checkLanguage = (e) => {
    setChosenLanguages(prev => ({
      ...prev,
      [e.target.value]: e.target.checked,
    }))
  }

  const showLanguages = () => {
    return Object.entries(chosenLanguages)
      .filter(([_, checked]) => checked)
      .map(([name, _]) => name)
      .join(', ')
  }

  return (
    <input value={showLanguages()} />
  )
}

chosenLanguages 不是数组，而是语言名称与其选中状态的映射，例如：

{
  arabic: true,
  spanish: false,
  french: true,
}

当你像这样存储你的状态后，你可以在渲染时以任何你想要的方式转换它。

如何获取选中复选框的值并将其输出到输入字段

how to get the values of a checked checkbox and the output it on a input field

javascript

reactjs

input

checkbox