实现一个带下拉框的输入框的可复用组件SearchInput

实现一个带下拉框的输入框的可复用组件SearchInput

要求：

1. 切换下拉框或修改输入框的值时，获取到参数
2. 返回参数格式为{searchValue:'',selectValue:''}
3. 在控制台打印出来

Step1：创建React组件

        首先，我们需要创建一个React组件，并在其中定义状态来管理输入框的值和下拉框的选择。

import React, { useState } from 'react';

const SearchInput = ({ onChange }) => {
    // 初始状态  
    const [searchValue, setSearchValue] = useState('');
    const [selectValue, setSelectValue] = useState('');

    //假设下拉框选择数据
    const options = [
        { value: 'option111', label: '选择1' },
        { value: 'option222', label: '选择2' },
        { value: 'option333', label: '选择3' },
    ]

    // 处理输入框值的变化  
    const handleSearchChange = (event) => {
        console.log('event', event.target.value);

        setSearchValue(event.target.value);
        onChange({ searchValue: event.target.value, selectValue });
    };

    // 处理下拉框值的变化  
    const handleSelectChange = (event) => {
        setSelectValue(event.target.value);
        onChange({ searchValue, selectValue: event.target.value });
    };

    return (
        <div>
            <input
                type="text"
                value={searchValue}
                onChange={handleSearchChange}
                placeholder="输入搜索内容"
            />
            <select value={selectValue} onChange={handleSelectChange}>
                {
                    options.map(option => (
                        <option key={option.value}>{option.label}</option>
                    ))
                }
            </select>
        </div>
    );
};

export default SearchInput;

 Step2：使用组件并接受变化

        接下来，在父组件中使用SearchInput并定义一个处理函数来接受来自SearchInput的变化。

import React from 'react';  
import ReactDOM from 'react-dom';  
import SearchInput from './SearchInput'; // 假设 SearchInput 组件位于当前目录下的 SearchInput.js 文件中  
  
function App() {  
  const handleChange = (params) => {  
    console.log(params); // {searchValue: '用户输入的内容', selectValue: '用户选择的选项'}  
  };  
  
  return (  
    <div>  
      <h1>搜索输入框组件</h1>  
      <SearchInput onChange={handleChange} />  
    </div>  
  );  
}  
  
ReactDOM.render(<App />, document.getElementById('root'));

说明

1. 组件状态：SearchInput组件内部使用useState钩子来管理输入框的值(searchValue) 和下拉框的值 (selectValue)。
2. 事件处理：handleSearchChange和handleSelectChange分别处理输入框和下拉框的变化，并调用外部传入的onChange函数，将最新的{searchValue，selectValue}对象作为参数传递。
3. 组件使用：在父组件中，通过onChange属性传入一个处理函数来接受来自SearchInput组件的变化通知。

以上步骤展示了如何构建一个可复用的SearchInput组件，该组件在输入框或下拉框的内容变化时，能够向父组件报告这些变化。