在 react-select 搜索组件中获取 onchange 文本

Question

我正在尝试使用反应 select 搜索 npm package 在我的页面中获取搜索 select 功能。

我的父组件

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;

使用 selectSearch 的任务组件 package

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;

到目前为止，我能够使用 package 中的 onChange function 获取所选文本。我的目标是在我们键入时从输入框中获取 onChange 文本。我尝试将 onKeyUp 道具传递到 select 搜索组件并尝试获取e 值变成 function 并没有成功有没有办法实现这个？。

Answer 1

在阅读文档后，我遇到了一个名为 getOptions 的功能性道具，它可以提供我们传递给组件的搜索查询，然后将其设置为 state，以便我可以在字段中保留值。

https://www.npmjs.com/package/react-select-search#custom-renderers

我做了什么，

在组件中添加 getOptions={myFunction} 并启用 search={true}

const [task,setTask]=useState(null);
 <SelectSearch
            options={props.statusOptions}
            id="input1"
            getOptions={myFunction}
            onChange={(data) => props.selectOptionChange(data, task.id)}
            name="taskStatus"
            search={true}
            data-id={idx}
            value={task}
            placeholder="Choose task status"
          />

const myFunction=(val)=>{
setTask(val);
}