Necesito su ayuda, ya intenté muchas cosas pero ninguna me funciona. Estoy intentando hacer que la información ingresada en un formulario, al hacer clic en el botón de agregar, se despliegue en una tabla.
Son 3 inputs.
En mi código ya tengo los eventos pero los hice por separado para cada input.
import React from 'react';
class Bookings extends React.Component {
constructor(props) {
super(props)
this.state = {
value: '',
pasajero: '',
tour: [],
pax: [],
precio: []
}
this.onSubmit = this.onSubmit.bind(this)
this.createTour = this.createTour.bind(this);
this.createPax = this.createPax.bind(this);
this.cratePrecio = this.createPrecio.bind(this);
}
createTour(e){
e.preventDefault();
this.setState({
tour: this.state.tour.concat([{name: e.target.tour.value}])
});
console.log(this.state)
}
createPax(e){
e.preventDefault();
this.setState({
pax: this.state.pax.concat([{name: e.target.pax.value}])
});
console.log(this.state)
}
createPrecio(e){
e.preventDefault();
this.setState({
precio: this.state.precio.concat([{name: e.target.precio.value}])
});
console.log(this.state)
}
Aquí agrego mi evento en onSubmit para que al hacer clic en el botón de agregar mande los datos a la tabla. Pero solo puedo poner uno de mis eventos, por lo tanto, solo me añade ese dato a la tabla.
<div className="inputs_tours">
<form onSubmit={this.createTour} className="form_tours">
<div className="form-group">
<label className="exampleFormControlInput1">Tour:</label>
<input
type="text"
className="form-control"
id="exampleFormControlInput1"
name= "tour"
/>
</div>
<div className="form-group">
<label className="exampleFormControlInput1">Pax:</label>
<input
type="number"
className="form-control"
id="exampleFormControlInput1"
placeholder="#"
name= "pax"
/>
</div>
<div className="form-group room">
<label className="exampleFormControlInput1">Precio:</label>
<input
type="number"
className="form-control"
id="exampleFormControlInput1"
placeholder="$"
name = "precio"
/>
</div>
<div className="pax_btn">
<button type="submit" className="btn btn-primary">Agregar</button>
</div>
</form>
</div>
<div className="table_tours">
<table className="table table-striped">
<thead>
<tr>
<th scope="col">Tour</th>
<th scope="col">Pax</th>
<th scope="col">Precio</th>
</tr>
</thead>
<tbody>
{this.state.tour.map(t => {
return(
<tr>
<td>{t.name}</td>
</tr>
);
})
}
{this.state.pax.map(p => {
return(
<tr>
<td>{p.name}</td>
</tr>
);
})
}
{this.state.precio.map(t => {
return(
<tr>
<td>{t.name}</td>
</tr>
);
})
}
</tbody>
</table>
</div>
</div>
</div>
Mi duda es: ¿cómo puedo hacer para crear un evento en el que agregue los 3 datos del formulario?