#javascript #arrays #reactjs #checkbox
#javascript #массивы #reactjs #флажок
Вопрос:
Я хочу консоль.запишите массив установленных флажков. Например, если установлены флажки 1, 2 и 5, я хочу, чтобы они отображались в консоли в виде массива значений каждого флажка. Я могу получить последнее выбранное значение для отображения в консоли, но я не могу получить массив всех установленных флажков для отображения. Они просто отображаются отдельно.
import { CheckboxData } from "../../../Data/SurveyData";
class CheckboxForm extends Component {
constructor(props) {
super(props);
this.state = { value: [] };
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({ value: event.target.value });
console.log("Checkbox: ", event.target.value);
}
handleSubmit(event) {
event.preventDefault();
}
render() {
return (
<div
id="checkboxContainer"
className="container"
onSubmit={this.handleSubmit}
>
{CheckboxData.map((data, key) => {
return (
<div key={key}>
<h5>{data.question}</h5>
<div className="form-check">
<input
className="form-check-input "
required={data.required}
name={data.name}
type={data.type}
value={data.options[0].value}
id={`${data.options[0].name}-${key}`}
onChange={this.handleChange}
/>
<label
className="form-check-label "
htmlFor={`${data.name}-${key}`}
>
{data.options[0].label}
</label>
</div>
<div className="form-check">
<input
className="form-check-input "
required={data.required}
name={data.name}
type={data.type}
value={data.options[1].value}
id={`${data.options[1].name}-${key}`}
onChange={this.handleChange}
/>
<label
className="form-check-label "
htmlFor={`${data.name}-${key}`}
>
{data.options[1].label}
</label>
</div>
<div className="form-check">
<input
className="form-check-input "
required={data.required}
name={data.name}
type={data.type}
value={data.options[2].value}
id={`${data.options[2].name}-${key}`}
onChange={this.handleChange}
/>
<label
className="form-check-label "
htmlFor={`${data.name}-${key}`}
>
{data.options[2].label}
</label>
</div>
<div className="form-check">
<input
className="form-check-input "
required={data.required}
name={data.name}
type={data.type}
value={data.options[3].value}
id={`${data.options[3].name}-${key}`}
onChange={this.handleChange}
/>
<label
className="form-check-label "
htmlFor={`${data.name}-${key}`}
>
{data.options[3].label}
</label>
</div>
<div className="form-check">
<input
className="form-check-input "
required={data.required}
name={data.name}
type={data.type}
value={data.options[4].value}
id={`${data.options[4].name}-${key}`}
onChange={this.handleChange}
/>
<label
className="form-check-label "
htmlFor={`${data.name}-${key}`}
>
{data.options[4].label}
</label>
</div>
</div>
);
})}
</div>
);
}
}
export default CheckboxForm;
Данные находятся в SurveyData.js файл следующим образом:
{
page: 2,
name: "checkbox",
question: "Check all that apply. I understand:",
type: "checkbox",
options: [
{
name: "checkbox1",
value: "I am entering into a new contract.",
label: "I am entering into a new contract.",
},
{
name: "checkbox2",
value:
"I will be responsible for $49.95 each month until my contract is over.",
label:
"I will be responsible for $49.95 each month until my contract is over.",
},
{
name: "checkbox3",
value: "I have three days to cancel.",
label: "I have three days to cancel.",
},
{
name: "checkbox4",
value:
"If I cancel after three days, I will be responsible for the remainder of the contract.",
label:
"If I cancel after three days, I will be responsible for the remainder of the contract.",
},
{
name: "checkbox5",
value:
"My system is monitored and if it is set off, the cops will come to my home.",
label:
"My system is monitored and if it is set off, the cops will come to my home.",
},
],
},
];```
Комментарии:
1. Вы присваиваете строки значениям флажков, что странно.
2. Форма checkbox должна содержать состояние всех флажков, а не только одного. Это может быть случай создания компонента CheckBox со своим собственным обработчиком onChange, при этом компонент CheckBoxForm отслеживает массив отмеченных полей с помощью обработчика, передаваемого через props.
3. @MattDale Я довольно новичок в react и не совсем понимаю, что вы имеете в виду. Не могли бы вы объяснить, пожалуйста?
4. @Cehhiro У меня были числа для значений, но моя цель — сохранить данные и иметь возможность их вызывать, и я не мог сказать, что я сохранял, когда это были числа.
5. @Heather Возможно, вам сначала потребуется получить четкое представление о состояниях, реквизитах и компонентах, прежде чем создавать что-то более сложное. В противном случае вы можете излишне затрудняться с чем-то простым, как только разберетесь с этими концепциями.
Ответ №1:
Вы можете изменить свою функцию handleChange, чтобы обновить массив ( this.state.value ), а не просто записывать введенное пользователем значение. Затем при обратном вызове для this.setState вы можете записать все значения в массиве.
Приведенный ниже код проверит, существует ли значение уже в вашем массиве; если оно существует, оно удаляется, в противном случае значение добавляется в массив
handleChange(event) {
const input = event.target.value;
this.setState(
{
value: this.state.value.includes(input)
? this.state.value.filter((item) => item !== input)
: [...this.state.value, input]
},
() => {
console.log(this.state.value);
}
);
}
Что-то еще, что могло бы упростить задачу, это проверить react-hook-form или, возможно, Formik (который, как я думал, был намного сложнее в освоении, чем hook form). Однако эти библиотеки будут управлять всем этим состоянием формы за вас, так что вам не нужно беспокоиться об этом.