React框架是一个非常流行和强大的JavaScript库,用于构建交互式用户界面。在这篇文章中,我们将使用React框架来创建一个简单的文本输入框和文字列表筛选器。
前置条件
在开始之前,您需要安装Node.js和npm(包管理器)。您可以从官方网站https://nodejs.org/en/download/下载并安装最新版本。
您还需要安装React框架。您可以使用以下命令在终端中安装:
npm install -g create-react-app
创建React应用程序
React应用程序需要通过命令行创建。在您选择的项目目录中,打开终端,并执行以下命令:
npx create-react-app my-app
cd my-app
npm start
此命令将创建一个名为“my-app”的React应用程序,并在浏览器中启动该应用程序。您可以通过访问http://localhost:3000/来查看运行结果。
创建文本输入框
我们将开始创建我们的文本输入框组件。在src文件夹下创建一个名为TextInput.js的文件,并添加以下代码:
import React from 'react';
const TextInput = (props) => {
return (
<input type="text" onChange={props.onChange} />
);
}
export default TextInput;
这段代码导入React库并创建一个名为TextInput的函数组件。在此组件中,我们渲染了一个HTML输入元素,其类型为“text”。我们还在onChange事件上绑定了一个回调函数,该函数将在每次输入框中的内容更改时被调用。
我们可以在我们的应用程序中使用TextInput组件。在App.js文件中添加以下代码:
import React, { useState } from 'react';
import TextInput from './TextInput';
const App = () => {
const [searchTerm, setSearchTerm] = useState('');
const handleInputChange = (event) => {
setSearchTerm(event.target.value);
}
return (
<div>
<TextInput onChange={handleInputChange} />
<p>You are searching for: {searchTerm}</p>
</div>
);
}
export default App;
这段代码导入React库和我们自己创建的TextInput组件。在App函数组件中,我们使用useState钩子来定义一个名为searchTerm的状态变量,并将其初始值设置为空字符串。
我们还定义了一个名为handleInputChange的回调函数,当文本输入框中的内容更改时,该函数将被调用。在此函数中,我们使用setSearchTerm函数更新searchTerm状态变量的值,以反映最新的文本输入框内容。
我们在应用程序中渲染了一个TextInput组件,并在其onChange事件上绑定了handleInputChange回调函数。我们还显示了用户当前搜索的内容。
创建文字列表筛选器
我们将创建一个用于过滤文字列表的组件。在src文件夹下创建一个名为TextList.js的文件,并添加以下代码:
import React, { useState } from 'react';
const TextList = () => {
const [textList, setTextList] = useState([
'Apple',
'Banana',
'Cherry',
'Date',
'Eggplant'
]);
const [searchTerm, setSearchTerm] = useState('');
const handleInputChange = (event) => {
setSearchTerm(event.target.value);
}
const filteredList = textList.filter(item =>
item.toLowerCase().includes(searchTerm.toLowerCase())
);
return (
<div>
<input type="text" onChange={handleInputChange} />
<ul>
{filteredList.map(item => (
<li key={item}>{item}</li>
))}
</ul>
</div>
);
}
export default TextList;
这段代码导入React库和useState钩子,并定义了一个名为TextList的函数组件。在此组件中,我们定义了两个状态变量:textList和searchTerm。textList包含了一个字符串数组,它将作为我们要过滤的文字列表。searchTerm初始值为空字符串。
我们还定义了handleInputChange回调函数,以便在文本输入框中的内容更改时更新searchTerm状态变量。
在组件顶部,我们使用filter方法来过滤textList数组,并返回所有包含搜索词(不区分大小写)的项。我们将筛选后的结果存储在名为filteredList的常量中。
我们在组件中渲染了一个文本输入框和一个无序列表。我们使用map方法遍历filteredList数组,并为其中每个项创建一个带有唯一键的列表项元素。
整合两个组件
我们已经创建了两个组件:TextInput和TextList。让我们将它们整合到一个单独的应用程序中。在App.js文件中添加以下代码:
import React from 'react';
import TextInput from './TextInput';
import TextList from './TextList';
const App = () => {
return (
<div>
<TextInput />
<TextList />
</div>
);
}
export default App;
这段代码导入React库和我们自己创建的TextInput和TextList组件。我们在应用程序中渲染了这两个组件。
运行应用程序
我们已经完成了我们的简单的文本输入框和文字列表筛选器应用程序。在终端中,使用以下命令运行该应用程序:
npm start
这将启动开发服务器,并在浏览器中打开应用程序。您可以输入文本来过滤文字列表,并实时查看结果。
结论
React框架是一个非常流行和强大的JavaScript库,用于构建交互式用户界面。在本文中,我们创建了一个简单的文本输入框和文字列表筛选器应用程序,并使用React框架进行了实现。我们还探讨了如何创建组件、状态变量以及回调函数,并最终将它们整合到一个单独的应用程序中。