网络技术问题 | React.js 测验 | 第 3 组 | 问题 4

问题描述

你正在参加一场React.js的技术测验，现在是第3组的第4个问题。以下是问题的详细描述：

问题背景

React.js是一个流行的JavaScript库，用于构建用户界面。它的组件化架构和虚拟DOM机制使得开发者能够高效地构建复杂且高效的web应用程序。

问题

你最近加入了一个新的React.js项目，你的团队在一个已有的组件上工作。该组件是一个简单的搜索框，用于在用户输入关键字后发起搜索。你注意到搜索框在用户点击搜索按钮之前并没有回调函数进行处理。

你的任务是：

1. 使用React.js中的状态管理器，为搜索框组件添加一个回调函数。
2. 当用户点击搜索按钮时，调用该回调函数，并传递当前搜索框的值作为参数。

请提供示例代码来解释你将如何实现以上功能。

解决方案

首先，你需要为搜索框组件添加一个状态来保存用户的输入值。你可以使用useState钩子来实现这个目标：

import React, { useState } from 'react';

function SearchBox({ onSearch }) {
  const [keyword, setKeyword] = useState('');

  const handleSearch = () => {
    onSearch(keyword);
  };

  return (
    <div>
      <input type="text" value={keyword} onChange={(e) => setKeyword(e.target.value)} />
      <button onClick={handleSearch}>Search</button>
    </div>
  );
}

export default SearchBox;

在上面的代码中，我们使用了useState钩子来定义一个名为keyword的状态，并使用setKeyword函数来更新它的值。每当用户在搜索框中输入内容时，onChange事件将被触发，并将输入框的当前值作为参数传递给setKeyword函数。

在handleSearch函数中，我们调用了传入组件的onSearch回调函数，并将当前搜索框的值作为参数传递给它。这样，当用户点击搜索按钮时，就会触发搜索事件，并将搜索框的值传递给回调函数。

最后，我们将输入框的值和搜索按钮渲染到组件中，并将handleSearch函数绑定到搜索按钮的onClick事件上。

总结

在这个问题中，你学会了如何为React.js组件添加一个回调函数，并在用户操作时调用它。你使用了React.js的状态管理器——useState钩子来保存搜索框的值，并将它作为参数传递给回调函数。这样，你的团队现在可以在用户点击搜索按钮后获取搜索框的值，并执行相应的搜索操作。

希望这个解决方案对你有帮助！在React.js的旅程中继续前进吧！