У меня проблема с сохранением множественного значения для данных с помощью флажка.После нажатия кнопки «Отправить» значения не сохраняются в виде массива.Только последнее значение будет записано в одном поле.Когда я пытаюсь записать behaviour[0] в <input>, он выглядит как behavoiur[] в базе данных firebase.Как правильно хранить данные в массиве?
import React, { Component } from 'react';
import fire from '../config/Fire';
import { Link } from 'react-router-dom';
import Navigation from '../components/Navigation';
class CreateForm extends Component {
constructor() {
super();
this.ref = fire.firestore().collection('form');
this.state = {
status: '',
date: '',
time: '',
project: '',
department: '',
phone: '',
detail: '',
behaviour: [],
tool: [],
environment: [],
action: '',
photo: '',
cases: ''
};
}
handleChange(e) {
// current array of options
const options = this.state.options
let index
// check if the check box is checked or unchecked
if (e.target.checked) {
// add the numerical value of the checkbox to options array
options.push(+e.target.value)
} else {
// or remove the value from the unchecked checkbox from the array
index = options.indexOf(+e.target.value)
options.splice(index, 1)
}
// update the state with the new array of options
this.setState({ options: options })
}
onChange = (e) => {
const state = this.state
state[e.target.name] = e.target.value;
this.setState(state);
}
onSubmit = (e) => {
e.preventDefault();
const { status, date, time, project, department, phone, detail, behaviour, tool, environment, action, photo, cases } = this.state;
this.ref.add({
status,
date,
time,
project,
department,
phone,
detail,
behaviour,
tool,
environment,
action,
photo,
cases
}).then((docRef) => {
this.setState({
status: '',
date: '',
time: '',
project: '',
department: '',
phone: '',
detail: '',
behaviour: [],
tool: [],
environment: [],
action: '',
photo: '',
cases: ''
});
this.props.history.push("/form")
})
.catch((error) => {
console.error("Error adding document: ", error);
});
}
render() {
const { status, date, time, project, department, phone, detail, behaviour, tool, environment, action, photo, cases } = this.state;
return (
<div>
<Navigation />
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
<p></p>
ADD FORM
</h3>
</div>
<div class="panel-body">
<h4><Link to="/form" class="btn btn-primary">Cancel</Link></h4>
<form onSubmit={this.onSubmit}>
<div class="form-group">
<label for="status">Status: </label>
<input type="radio" name="status" value="Unsafe Act" onChange={this.onChange}/> Unsafe Act
<input type="radio" name="status" value="Unsafe Condition" onChange={this.onChange}/> Unsafe Condition
</div>
<div class="form-group">
<label for="date">Date: </label>
<input type="date" class="form-control" name="date" value={date} onChange={this.onChange} placeholder="Select date" required/>
</div>
<div class="form-group">
<label for="time">Time: </label>
<input type="time" class="form-control" name="time" value={time} onChange={this.onChange} placeholder="Select time" required/>
</div>
<div class="form-group">
<label for="project">Project: </label>
<input type="text" class="form-control" name="project" value={project} onChange={this.onChange} placeholder="Select project" required/>
</div>
<div class="form-group">
<label for="department">Department: </label>
<input type="text" class="form-control" name="department" value={department} onChange={this.onChange} placeholder="Select department" required/>
</div>
<div class="form-group">
<label for="phone">Phone number: </label>
<input type="text" class="form-control" name="phone" value={phone} onChange={this.onChange} placeholder="Insert phone number" required/>
</div>
<div class="form-group">
<label for="detail">Detail Description of Unsafe Act Unsafe Condition Observed : </label>
<input type="text" class="form-control" name="detail" value={detail} onChange={this.onChange} placeholder="Insert details" required/>
</div>
<div class="form-group">
<br></br>
<label for="behaviour">People & At Risk Behaviours: </label><br></br>
<input type="checkbox" name="behaviour" onChange={this.handleChange.bind(this)} value="Annoyance and horseplay in the workplace"/> Annoyance and horseplay in the workplace<br></br>
<input type="checkbox" name="behaviour" onChange={this.handleChange.bind(this)} value="Removing safety guards from the workplace or equipment"/> Removing safety guards from the workplace or equipment<br></br>
<input type="checkbox" name="behaviour" onChange={this.handleChange.bind(this)} value="Improper posture of task"/> Improper posture of task<br></br>
<input type="checkbox" name="behaviour" onChange={this.handleChange.bind(this)} value="Risk of contact with electric current/ hot surface/ hot water"/> Risk of contact with electric current/ hot surface/ hot water<br></br>
<input type="checkbox" name="behaviour" onChange={this.handleChange.bind(this)} value="Improper lifting, handling or moving object"/> Improper lifting, handling or moving object<br></br>
<input type="checkbox" name="behaviour" onChange={this.handleChange.bind(this)} value="Working under the effect of alcohol/ drugs etc"/> Working under the effect of alcohol/ drugs etc<br></br>
<input type="checkbox" name="behaviour" onChange={this.handleChange.bind(this)} value="Improper placing and stacking of object and material in dangerous location"/> Improper placing and stacking of object and material in dangerous location<br></br>
Others:<br></br>
<input type="text" class="form-control" name="behaviour" value={behaviour} onChange={this.onChange} placeholder="Insert details"/>
</div>
<div class="form-group">
<label for="tool">Tools and Equipment: </label><br></br>
<input type="checkbox" name="tool" value="Incorrect use of tools and equipment" /> Incorrect use of tools and equipment<br></br>
<input type="checkbox" name="tool" value="No maintenance carried out" /> No maintenance carried out<br></br>
<input type="checkbox" name="tool" value="Inadequate procedure" /> Inadequate procedure<br></br>
<input type="checkbox" name="tool" value="Poor design" /> Poor design<br></br>
<input type="checkbox" name="tool" value="Use of defective tools and equipment" /> Use of defective tools and equipment<br></br>
<input type="checkbox" name="tool" value="Deviate from procedure" /> Deviate from procedure<br></br>
Others:<br></br>
<input type="text" class="form-control" name="tool" value={tool} onChange={this.onChange} placeholder="Insert details"/>
</div>
<div class="form-group">
<label for="environment">Work Environment: </label><br></br>
<input type="checkbox" name="environment" value="Poor ventilation" /> Poor ventilation<br></br>
<input type="checkbox" name="environment" value="Poor housekeeping" /> Poor housekeeping<br></br>
<input type="checkbox" name="environment" value="Trip hazards" /> Trip hazards<br></br>
<input type="checkbox" name="environment" value="Poor lighting" /> Poor lighting<br></br>
<input type="checkbox" name="environment" value="Wet floor" /> Wet floor<br></br>
Others:<br></br>
<input type="text" class="form-control" name="environment" value={environment} onChange={this.onChange} placeholder="Insert details"/>
</div>
<div class="form-group">
<label for="action">Action: </label>
<input type="text" class="form-control" name="action" value={action} onChange={this.onChange} placeholder="Insert action" required/>
</div>
<div class="form-group">
<label for="photo">Photo URL: </label>
<input type="text" class="form-control" name="photo" value={photo} onChange={this.onChange} placeholder="Insert photo URL" required/>
</div>
<div class="form-group">
<label for="cases">Case: </label>
<input type="radio" name="cases" value="Open" onChange={this.onChange}/> Open
<input type="radio" name="cases" value="Close" onChange={this.onChange}/> Close
</div>
<button type="submit" class="btn btn-success">Submit</button>
</form>
</div>
</div>
</div>
</div>
);
}
}
export default CreateForm;
Что я получил: Изображение1
Что я хочу: Изображение2