ReactJS:在项目中的何处放置当onclick()事件发生时调用的Javascript函数

Question

我是ReactJS的新手，正在开发以下组件：

request-item.jsx

import React, { Component } from 'react';
import { connect } from 'react-redux';
import './request-item.scss';
class RequestItem extends Component {
render() {
return (
<div class="request-box">
<div class="request-details">
<div class="information">
<h1>Table 9, 3:00PM</h1>
<h2>Request made 6 min ago.</h2>
</div>
<div class="status-button">
<button type="button" class="request-button">Assistance Requested</button>
</div>
</div>
</div>
);
}
}
export default RequestItem;

此组件是以下页面的一部分：

import React from 'react';
import { connect } from 'react-redux';
import RequestItem from '../../components/request-item/request-item.component';
import './requestlistpage.scss';
class RequestListPage extends React.Component {
render() {
return (
<div>
<h1>Requests</h1>
<div className="requests-container">
<RequestItem />
<RequestItem />
<RequestItem />
<RequestItem />
<RequestItem />
<RequestItem />
<RequestItem />
</div>
</div>
)
}
}
export default RequestListPage;

当我点击请求按钮时，我希望按钮中的文本从"请求的协助"更改为"已完成"。

我知道这可以通过以下方式来实现：

<button onclick="change()" type="button" id="button-1" class="request-button">Assistance Requested</button>
function change() 
{
var elem = document.getElementById("button-1");
if (elem.value=="Assistance Requested") elem.value = "Completed";
else elem.value = "Assistance Requested";
}

如果我只是使用HTML/CSS/Javascript，我会在一个单独的文件中拥有change()函数，并将该文件包含在HTML文件中。

然而，由于我在React工作，我不确定惯例是什么。我的项目结构如下：

src 
> assets
> components
> pages
> redux

如果我有一个像change()这样的函数，每当onclick()事件发生时都会调用它，那么我会在React项目中把这个函数包括在哪里？任何见解都将不胜感激。

Answer 1

这里有一个非常简单的解决方案

class RequestItem extends Component {
this.state = {
status: "Assistance Requested", // Initial State
}
// Handle your state changes here
toggleStatus = () => { 
if (this.state.status === "Assistance Requested") {
// UI re-renders when setState is invoked
this.setState({ status: "Completed" });
} else {
this.setState({ status: "Assistance Requested" });
}
};
render() {
return (
<div class="request-box">
<div class="request-details">
<div class="information">
<h1>Table 9, 3:00PM</h1>
<h2>Request made 6 min ago.</h2>
</div>
<div class="status-button">
<button type="button" class="request-button" onClick={this.toggleStatus}>
{this.state.status}
</button>
</div>
</div>
</div>
);
}
}
export default RequestItem;

在react中，您可以使用state和props的组合来处理对UI的更改。Props从父级传递到子级，而state包含组件级逻辑。

在您的案例中，changeStatus将是处理程序函数，当单击按钮时，您可以在其中处理逻辑更改。所有与UI相关的更改都存储在state中，因为每当调用setState函数时，state都会被更新，react会查找更改并再次调用render函数来更新UI。

您可以通过浏览网站上的教程或查看主要概念来学习标准实践。