为什么在我的 React 表单中添加一个额外的按钮会导致我的两个按钮停止工作?

Question

我是React和JavaScript的新手，并且一直在尝试在我的应用程序中创建一个"清除搜索过滤器"功能。我已经在searchProgram函数中编写了代码的"使用过滤器搜索"部分，效果很好。工作原理：searchProgram作为道具从App.js传递到SearchForm.js。在SearchForm中提交时，在handleSubmit函数中调用searchProgram，它工作得很好。但是，在添加一个名为"清除"的新按钮后，这两个按钮现在都已停止工作。据我所知，没有产生任何错误。任何关于这方面的提示将不胜感激。谢谢！

下面的代码片段是我的App.js文件，包含搜索项目功能。

import React, { Component } from "react";
import LogIn from "./LogIn.js"
import User from "./components/User.js"
import Project from "./components/Project.js"
import CreateForm from "./CreateForm.js";
import DeleteForm from "./DeleteForm.js";
import SearchForm from "./SearchForm.js";
import JoinForm from "./JoinForm.js";
class App extends Component {
constructor(props) {
super(props);
this.state = {
projectList: [],
searchProjects: [],
userList: [],
currentUser: "Guest",
filterMode : false
};
this.logIn = this.logIn.bind(this);
this.searchProject = this.searchProject.bind(this);
this.joinProject = this.joinProject.bind(this);
this.createProject = this.createProject.bind(this);
this.deleteProject = this.deleteProject.bind(this);
}
logIn(name) {
this.setState({
currentUser : name
})
}    
createProject(title, desc, langs, len, exp) {
this.setState({
projectList: [...this.state.projectList, {
title : title,
description : desc,
language : langs,
length : len,
experience : exp,
user : this.state.currentUser
}]
});
}
deleteProject(title) {
const projects = this.state.projectList.filter(
p => p.title !== title 
);
this.setState({projectList : projects});
}
searchProject(title, language, length, experience) {
//added if else statement
if ((title === "") && (language === "") && (length === 0) && (experience === "")) {
this.setState({
filterMode : false
})
} else {
let projects = [...this.state.projectList];
if (title !== "") {
projects = projects.filter(
p => p.title === title 
);
}
if (language !== "") {
projects = projects.filter(
p => p.language === language
);
}
if (length !== 0) {
projects = projects.filter(
p => p.length === length 
);
}
if (experience !== "") {
projects = projects.filter(
p => p.experience === experience
);
}
this.setState({
searchProjects : projects,
filterMode : true
});            
}
}
joinProject(title) {
let projects = [...this.state.projectList];
if (title !== "") {
projects = projects.filter(
p => p.title === title 
);
}
this.setState({projectList : projects});
}
render() {
//added if else to render
if (this.filterMode === true) {
return(
<div>
<User name = {this.state.currentUser} />
<LogIn logIn = {this.logIn} />
<CreateForm createProject = {this.createProject} />
<DeleteForm deleteProject = {this.deleteProject} />
<SearchForm searchProject = {this.searchProject} />
<JoinForm joinProject = {this.joinProject} />
<h1> Project List: </h1>
{this.state.searchProjects.map((params) =>
<Project key = {params.title} {...params} 
currentUser = {this.state.currentUser}/>)}
</div>
);
} else {
return(
<div>
<User name = {this.state.currentUser} />
<LogIn logIn = {this.logIn} />
<CreateForm createProject = {this.createProject} />
<DeleteForm deleteProject = {this.deleteProject} />
<SearchForm searchProject = {this.searchProject} />
<JoinForm joinProject = {this.joinProject} />
<h1> Project List: </h1>
{this.state.projectList.map((params) =>
<Project key = {params.title} {...params} />)}
</div>
);
}
}

}
export default App;

下面是 SearchForm.js 文件，其中包含我的过滤表单。添加的新函数称为 resetState，而添加的新按钮位于输入类型 = "submit" 位之前。

import React from "react";
class SearchForm extends React.Component {
constructor(props) {
super(props);
this.state = {
title: "",
language: "",
length: 0,
experience: ""
};

this.resetState = this.resetState.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
this.handleInputChange = this.handleInputChange.bind(this);
}
//added resetState function
resetState(event) {
event.preventDefault();
this.props.searchProject(
"",
"",
0,
""
)
}
handleSubmit(event) {
event.preventDefault();
this.props.searchProject(
this.state.title,
this.state.language,
this.state.length,
this.state.experience
)

}

handleInputChange(event) {
const target = event.target;
const value = target.value;
const name = target.name;

this.setState({
[name]: value
});
}

render() {
return (
<div>
<h2> Search Project: </h2>
<form onSubmit={this.handleSubmit}>
<label>
Title:
<input
name="title"
type="textbox"
checked={this.state.title}
onChange={this.handleInputChange} />
</label>
<br />
<label>
Language:
<input
name="language"
type="textbox"
checked={this.state.language}
onChange={this.handleInputChange} />
</label>
<br />
<label>
Length:
<input
name="length"
type="number"
checked={this.state.length}
onChange={this.handleInputChange} />
</label>
<br />
<label>
Experience:
<input
name="experience"
type="textbox"
checked={this.state.experience}
onChange={this.handleInputChange} />
</label>
<br />
//added button
<button onClick={this.resetState}>
Clear
</button>
<input type="submit" value="Search" />
</form>
</div>
);
}
}
export default SearchForm;

Answer 1

在App组件上的render方法中，您正在验证类变量this.filterMode而不是组件state。

试试这个：

应用程序

render() {
if (this.state.filterMode) {
...
} else {
...
}
}