在ReactJS中向现有表动态添加行
我在学英语 我已经呈现了一个预先存在的表，它默认只包含一行。现在单击按钮时，我希望每次单击按钮时都追加一行，但追加的最大行数不应大于4 这是我的密码：在ReactJS中向现有表动态添加行,reactjs,Reactjs,我在学英语 我已经呈现了一个预先存在的表，它默认只包含一行。现在单击按钮时，我希望每次单击按钮时都追加一行，但追加的最大行数不应大于4 这是我的密码： import React, { Component } from "react"; import Sidebar from "../Home/Sidebar"; import axios from "axios"; import $ from "jquery"; import { isDivisibleBy100 } from "../utils
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;
constructor(props) {
super(props)
this.state = {rows: []};
}
您正在使用jquery并直接处理真正的DOM。使用React，我们使用虚拟DOM，而不操纵真实的DOM。与Jquery不同，在react中，您不必担心处理UI。您应该关心的是如何正确处理数据，让UI更新做出反应。您尚未在此处提供表组件信息。所以，我会给你一个代码示例，它正是你想要实现的。对于按钮，您可以将其放置在此组件中需要的位置
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>
);
您可以发布呈现该表的代码吗？或者函数appendRow？@SagiRika函数appendRow已经存在于代码中。检查我是否删除了一些不相关的代码。不要将jquery与React一起使用，而是使用中动态呈现内容array@ShubhamKhatri请发布此示例代码好吗？单击按钮会出现错误-TypeError:无法读取未定义的属性“state”，位于var JOINTED=…行，抱歉，请检查更新的答案。还可以查看实例。codesandbox充满了无法工作的错误fyi@TomStickel刚刚在Chrome上测试过。。似乎工作正常？无法获取，ModuleNotFoundError:无法在路径“@babel/runtime/helpers/interopRequireDefault”相对于“/src/index.js”中找到模块。感谢您的解决方案。这很有效。但是，当我们填充时，有一个问题，在a中有一个状态调用，如：{this.state.price.mapc=>{c.price}}。由此产生错误：TypeError:无法读取未定义的属性“state”。此常量行无法访问React组件的任何状态。那么，我是否可以用数组填充它，并在const行中使用它，从而填充其中的选择框？这取决于您的选择选项。是每行不同，还是每行都一样。如果所有行的价格相同，则创建一个选择组件，并将价格状态放在该组件内。如果不是：将其传递给行组件，考虑到表组件中存在价格状态。另一个选项是创建一个函数，返回组件内部的行。所以在表组件内部创建函数getRow。getRow=id=>{this.state.price.mapc=>{c.price}}所有行的值都是相同的，是的，我只是做了同样的事情，它让我工作起来。非常感谢。我接受了答案。
render() {
...
return (
...
<button
rel="1"
type="button"
id="addbtn"
className="btn btn-circle"
onClick={this.appendRow}>
<i className="fa fa-plus" />
</button>
...
<tbody>
{this.state.rows}
</tbody>
...
)
...
}
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>
);