如何获取react-select-search组件输入框实时输入的文本？

我正在使用react-select-search npm包实现搜索选择功能，目前能通过onChange获取选中的选项文本，但需要实时获取输入框中用户输入的内容。尝试过给组件加onKeyUp属性但没效果，求可行的实现方法。

父组件TaskList代码 #

import React, { Component } from "react";
import Task from "./task";
class TaskList extends Component {
  state = {
    taskList: [
      {
        id: 1,
        taskname: "",
        taskdate: new Date(),
        taskstatus: "",
        taskdesc: ""
      }
    ],
    statusOptions: [
      { id: 1, name: "Pending", value: "Pending", key: "Pending" },
      { id: 2, name: "In-Progress", value: "In-Progress", key: "In Progress" },
      { id: 3, name: "Completed", value: "Completed", key: "Completed" }
    ]
  };
  addNewtask = () => {
    let lastTaskId;
    if (this.state.taskList.length !== 0) {
      lastTaskId = this.state.taskList[this.state.taskList.length - 1].id;
      lastTaskId = lastTaskId + 1;
    } else {
      lastTaskId = 1;
    }
    this.setState((prevState) => ({
      taskList: [
        ...prevState.taskList,
        {
          id: lastTaskId,
          taskname: "",
          taskdate: new Date(),
          taskstatus: "",
          taskdesc: ""
        }
      ]
    }));
  };
  handletaskDelete = (taskId) => {
    const taskList = this.state.taskList.filter((task) => {
      return taskId !== task.id;
    });
    this.setState({ taskList });
  };
  setStartDate = (data, taskId) => {
    this.setState((prevState) => ({
      taskList: prevState.taskList.map((obj) =>
        obj.id === taskId
          ? Object.assign(obj, { taskdate: new Date(data) })
          : obj
      )
    }));
  };
  selectOptionChange = (data, taskId) => {
    this.setState((prevState) => ({
      taskList: prevState.taskList.map((obj) =>
        obj.id === taskId ? Object.assign(obj, { taskstatus: data }) : obj
      )
    }));
  };
  setTaskDesc = (data, taskId) => {
    this.setState((prevState) => ({
      taskList: prevState.taskList.map((obj) =>
        obj.id === taskId ? Object.assign(obj, { taskstatus: data }) : obj
      )
    }));
  };
  setTaskName = (data, taskId) => {
    this.setState((prevState) => ({
      taskList: prevState.taskList.map((obj) =>
        obj.id === taskId ? Object.assign(obj, { taskname: data }) : obj
      )
    }));
  };
  handleValidation() {
    const taskList = this.state.taskList.filter((task) => {
      return task.taskname !== "";
    });
    this.setState({ taskList });
  }
  saveTasks = () => {
    this.handleValidation();
    const localTaskList = this.state.taskList;
    console.log("check", localTaskList);
    //  localStorage.setItem('tasklist', JSON.stringify(localTaskList));
  };
  componentDidMount() {
    //  let taskList;
    //  const localTaskList = localStorage.getItem('tasklist') !== null
    //  if (localTaskList) {
    //      console.log("enter")
    //      taskList = JSON.parse(localStorage.getItem('tasklist'))
    //  } else {
    //      taskList = [{ id: 1, taskname: "", taskdate: new Date(), taskstatus: "", taskdesc: "" }]
    //  }
    //  this.setState({taskList});
    console.log(
      "render",
      typeof this.state.taskList,
      this.state,
      localStorage.getItem("tasklist")
    );
    //  { id: lastTaskId, taskname: "", taskdate: new Date(), taskstatus: "", taskdesc: "" }
  }
  render() {
    let { taskList, statusOptions } = this.state;
    return (
      <div>
        <table>
          <thead>
            <tr>
              <th>Task Name</th>
              <th>Task Date</th>
              <th>Task tatus</th>
              <th>Task Description</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            <Task
              taskList={taskList}
              statusOptions={statusOptions}
              setTaskName={this.setTaskName}
              setTaskDesc={this.setTaskDesc}
              selectOptionChange={this.selectOptionChange}
              onTaskDelete={this.handletaskDelete}
              setStartDate={this.setStartDate}
            />
          </tbody>
          <tfoot>
            <tr>
              <td>
                <button onClick={this.addNewtask}>Add list</button>
              </td>
            </tr>
            <tr>
              <td>
                <button onClick={this.saveTasks}>Save</button>
              </td>
            </tr>
          </tfoot>
        </table>
        {/* { this.state.taskList.map(task => {task.id}) } */}
      </div>
    );
  }
}

export default TaskList;

Task子组件代码 #

import React from "react";
import DatePicker from "react-datepicker";
import SelectSearch from "react-select-search";
import "react-datepicker/dist/react-datepicker.css";
import "./tasklist.css";
const Task = (props) => {
  return props.taskList.map((task, idx) => {
    let taskName = `taskname-${idx}`,
      taskDate = `taskdate-${idx}`,
      taskDesc = `taskdesc-${idx}`,
      taskStatus = `taskstatus-${idx}`,
      taskDelete = `taskdelete-${idx}`;
    return (
      <tr key={task.id} className={task.taskstatus}>
        <td>
          <input
            type="text"
            name="taskName"
            data-id={idx}
            id={taskName}
            onChange={(data) => props.setTaskName(data, task.id)}
          />
        </td>
        <td>
          <DatePicker
            selected={new Date(task.taskdate)}
            id={taskDate}
            onChange={(data) => props.setStartDate(data, task.id)}
          />
        </td>
        <td>
          <textarea
            name="textarea"
            rows="4"
            cols="50"
            data-id={idx}
            id={taskDesc}
            onChange={(data) => props.setTaskDesc(data, task.id)}
          ></textarea>
        </td>
        <td>
          <SelectSearch
            options={props.statusOptions}
            onChange={(data) => props.selectOptionChange(data, task.id)}
            name="taskStatus"
            data-id={idx}
            id={taskStatus}
            placeholder="Choose task status"
          />
        </td>
        <td>
          <button
            data-id={idx}
            id={taskDelete}
            onClick={() => props.onTaskDelete(task.id)}
          >
            Delete
          </button>
        </td>
      </tr>
    );
  });
};
export default Task;

react-select-search组件内置了onSearch回调，专门用于监听搜索输入框的实时内容变化，参数就是当前输入的文本。直接使用这个API比手动绑定onKeyUp更可靠，因为组件内部封装了输入框，原生事件无法直接穿透到内部元素。

1. 在父组件添加实时输入处理方法 #

在TaskList类中新增方法，用于更新对应任务的搜索输入状态：

handleStatusSearch = (inputText, taskId) => {
  this.setState(prevState => ({
    taskList: prevState.taskList.map(obj => 
      obj.id === taskId 
        ? {...obj, taskStatusInput: inputText} // 新增字段存储实时输入内容
        : obj
    )
  }));
};

2. 将方法传递给子组件 #

在TaskList的render方法中，把handleStatusSearch作为props传给Task组件：

<Task
  taskList={taskList}
  statusOptions={statusOptions}
  setTaskName={this.setTaskName}
  setTaskDesc={this.setTaskDesc}
  selectOptionChange={this.selectOptionChange}
  onTaskDelete={this.handletaskDelete}
  setStartDate={this.setStartDate}
  handleStatusSearch={this.handleStatusSearch} {/* 新增该行 */}
/>

3. 在子组件启用onSearch回调 #

修改Task子组件中的SelectSearch，添加onSearch属性：

<SelectSearch
  options={props.statusOptions}
  onChange={(data) => props.selectOptionChange(data, task.id)}
  onSearch={(inputText) => props.handleStatusSearch(inputText, task.id)} {/* 新增该行 */}
  name="taskStatus"
  data-id={idx}
  id={taskStatus}
  placeholder="Choose task status"
/>

现在你就能在handleStatusSearch方法中实时获取用户输入的文本，可根据需求做过滤、存储等操作。

内容的提问来源于stack exchange，提问作者bugsmasher