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

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状态(受控组件)，然后有一种显示该状态的方法。在您的示例中，您希望存储一堆复选框的状态，而实现此目的的一种方法是使用映射。

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,
}

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