TA貢獻1853條經(jīng)驗 獲得超18個贊
我對這段代碼提出一些建議：
這是一種個人偏好，使用箭頭表示法來定義類方法，這樣您就不必.bind(this)為每個方法都定義了。
// this is the same as
constructor(props) {
this.someFunc = this.someFunc.bind(this)
}
someFunc() {}
// writing just this
someFunc = () => {}
您內(nèi)部的代碼if (this.state.error) {}幾乎與整個組件相同，只是做了一些細微的更改。我建議您的 if 語句更有針對性/具體，只需更改所需的最小部分即可。（參見下面的大代碼）
在一些地方，您使用三元運算符來返回某些內(nèi)容 OR a <Fragment />。同樣，這可能只是個人喜好，但您可以使用它&&來簡化代碼。
// this is the same as
{this.state.searchForm ? (
<MyComponent />
) : (
<Fragment />
)}
// is the same as writing
{this.state.searchForm && <MyComponent />}
// or
{this.state.searchForm && (
<MyComponent
foo="something"
bar="baz"
onClick={this.onClick}
/>
)}
這是應用了上面的簡化的完整代碼示例。
RE：您的實際問題是，為什么文本沒有在搜索按鈕內(nèi)交換...您的點擊處理程序看起來正確，應該正確更改狀態(tài)...也許像我建議的那樣使用 if 語句，更有針對性僅更改按鈕內(nèi)的實際文本而不是整個按鈕會有所幫助。
import React, { Component, Fragment } from "react";
import SideBar from "../../components/navBar/SideBar";
import SearchForm from "../../components/forms/SearchForm";
import TransactionTable from "../../components/tables/TransactionTable";
import "./data.css";
import { getTransaction } from "../../actions/Transactions";
export default class Data extends Component {
constructor(props) {
super(props);
this.state = {
year: 0,
month: "",
transactions: [],
searchForm: false,
addForm: false,
editForm: false,
error: false,
errorMessage: "",
};
this.months = [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December",
];
}
componentDidMount() {
const currentDate = new Date();
var currentYear = currentDate.getYear() + 1900;
this.setState({ year: currentYear });
var currentMonth = this.months[currentDate.getMonth()].toLowerCase();
this.setState({ month: currentMonth });
getTransaction({ year: currentYear, month: currentMonth }).then((res) => {
if (res.error) {
this.setError(true, res.error);
} else {
this.setError(false);
this.setState({ transactions: res });
}
});
}
navBtnClick = () => {
this.props.updateNavBarState();
};
addBtnClick = (e) => {
this.setState({ addForm: !this.state.addForm });
};
searchBtnClick = () => {
this.setState({ searchForm: !this.state.searchForm });
};
editBtnClick = (e) => {
this.setState({ editForm: !this.state.editForm });
};
deleteBtnClick = (e) => {};
updateTable = (transactions) => {
// If there isn't an error, close the form
if (this.state.error === false) {
this.setState({ transactions: transactions });
this.setState({ addForm: false });
this.setState({ searchForm: false });
this.setState({ editForm: false });
}
};
setError = (state, message = "") => {
this.setState({ error: state });
this.setState({ errorMessage: message });
};
render() {
return (
<Fragment>
<SideBar sideBarState={this.props.sideBarState} />
<div className="page">
<div className="grid head">
<span id="sidebarCollapseBtn">
<i className="fas fa-align-left" onClick={this.navBtnClick}></i>
</span>
<h1 className="capitalize">data</h1>
</div>
<div className="content">
<div className="card" id="dataCard">
<div className="actions" id="actions">
<div className="flex">
<button
className="search btn"
id="searchBtn"
onClick={this.searchBtnClick}
>
{this.state.searchForm ? (
"close"
) : (
<Fragment>
<i className="fas fa-search mr-025"></i>search
</Fragment>
)}
</button>
<button
className="add btn"
id="addBtn"
onClick={this.addBtnClick}
>
<i className="fas fa-plus mr-025"></i>add
</button>
</div>
{this.state.searchForm && (
<SearchForm
year={this.state.year}
month={this.state.month}
updateTable={this.updateTable}
setError={this.setError}
/>
)}
</div>
<div className="output">
{this.state.error && <h2>{this.state.errorMessage}</h2>}
{this.state.transactions.length > 1 && (
<TransactionTable transactions={this.state.transactions} />
)}
</div>
</div>
</div>
</div>
</Fragment>
);
}
}
舉報