Estoy aprendiendo ReactJS.
Tengo una tabla preexistente renderizada que contiene theadsolo 1 fila por defecto. Ahora, al hacer clic en el botón, quiero agregar una fila cada vez que haga clic en el botón, pero el número máximo de filas agregadas no debe ser superior a 4.
Aquí está mi código:
import React, { Component } from "react";
import Sidebar from "../Home/Sidebar";
import axios from "axios";
import $ from "jquery";
import { isDivisibleBy100 } from "../utils/utility";
import { Chart } from "react-charts";
class Strategy extends Component {
state = {
Price: [],
chart_data: [],
loadData: true,
unit: parseFloat(0),
loadUnit: true,
};
componentDidMount() {
this.getPriceList();
}
getPriceList() {
axios.get("http://localhost:8000/listprice/").then(res => {
if (res.data.result === 1) {
this.setState({ Price: res.data.data });
}
});
}
appendRow(event) {
var rel = event.target.getAttribute("rel");
rel = parseInt(rel) + 1;
console.log(rel);
var addRow = (
<tr>
<td>
<input type="text" id={`select-type` + rel} />
</td>
<td>
<input type="text" id={`select-position` + rel} />
</td>
</tr>
);
$(".table tbody").append(appRow);
}
render() {
return (
<div className="container container_padding">
<div className="row">
<Sidebar />
<div className="col-md-9 col-sm-9 col-xs-12 white-box">
<div className="col-sm-12">
<h3 className="col-sm-4" style={{ padding: "0px" }}>
Strategy Plan:
</h3>
<div className="col-sm-7" />
<div className="col-sm-1" style={{ marginTop: "15px" }}>
<button
rel="1"
type="button"
id="addbtn"
className="btn btn-circle"
onClick={this.appendRow}
>
<i className="fa fa-plus" />
</button>
</div>
</div>
<div className="col-sm-12 a">
<div className="table-responsive">
<table className="table table-bordered">
<thead>
<tr>
<td>#</td>
<td>Type</td>
<td>Position</td>
<td>Price</td>
<td>Number</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>
<select
className="form-control"
name="select-type"
id="select-type"
>
<option value="select">Select</option>
<option value="one">1</option>
<option value="two">2</option>
</select>
</td>
<td>
<select
className="form-control"
name="select-position"
id="select-position"
>
<option value="select">Select</option>
<option value="a">A</option>
<option value="b">B</option>
</select>
</td>
<td>
<select
className="form-control"
name="price-list"
id="price-list"
onChange={event =>
this.handlePriceChange(event)
}
>
<option value="select">Select</option>
{this.state.Price.map(p => (
<option
value={p.pprice}
key={p.price}
>
{p.price}
</option>
))}
</select>
</td>
<td style={{ width: "180px" }}>
<input
id="input-number"
type="text"
className="form-control"
defaultValue="1"
/>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div className="col-sm-12">
<button
className="btn"
onClick={() => this.handleClick()}
>
Calculate
</button>
</div>
{this.state.loadData ? (
""
) : (
<div
style={{
width: "600px",
height: "300px",
marginTop: "35px",
marginLeft: "25px",
marginBottom: "10px"
}}
>
<Chart
data={this.state.chart_data}
series={{ type: "line" }}
axes={[
{ primary: true, type: "linear", position: "bottom" },
{ type: "linear", position: "left" }
]}
primaryCursor
secondaryCursor
tooltip
/>
</div>
)}
</div>
</div>
</div>
);
}
}
export default Strategy;
La appendRowfunción no agrega la fila.
¿Qué me estoy perdiendo? ¿Existe alguna forma mejor de lograrlo?
Por favor recomiende.
Gracias por adelantado
Estás usando jquery y manejando directamente DOM real. Con React usamos Virtual DOM y no manipulamos el DOM real. A diferencia de Jquery, en React no tienes que preocuparte por manejar la IU. Su preocupación debe ser manejar los datos correctamente, deje las actualizaciones de la interfaz de usuario para Reaccionar. No ha proporcionado la información del componente de tabla aquí. Entonces, le daría una muestra de código que hace exactamente lo que desea lograr. Para el botón, puede colocarlo donde sea necesario dentro de este componente.
import React from "react";
class Table extends React.Component {
state = {
data: []
};
appendChild = () => {
let { data } = this.state;
data.push(data.length); // data.length is one more than actual length since array starts from 0.
// Every time you call append row it adds new element to this array.
// You can also add objects here and use that to create row if you want.
this.setState({data});
};
render() {
return (
<table>
<thead>
<th>Type</th>
<th>Position</th>
</thead>
<tbody>
{this.state.data.map(id => (
<Row id = {id} />
))}
</tbody>
</table>
);
}
}
const Row = ({ id }) => (
<tr>
<td>
<input type="text" id={`select-type-${id}`} />
</td>
<td>
<input type="text" id={`select-position-${id}`} />
</td>
</tr>
);
Este artículo se recopila de Internet, indique la fuente cuando se vuelva a imprimir.
En caso de infracción, por favor [email protected] Eliminar
Déjame decir algunas palabras