React+TypeScript待办项：选择优先级修改Div背景色遇报错

核心问题 #

1. 函数组件误用类组件语法：你在函数组件里直接声明handleOptionsChange:any; setState:any;，这是类组件的写法，函数组件需用useState钩子管理状态。
2. 状态传递逻辑错误：你试图调用props.setState，但并未从父组件传入该方法；同时select的onChange绑定了props.handleOptionsChange，但这个函数是定义在ToDoItem内部的，根本没传递给props。
3. 动态样式逻辑缺失：没有根据选中的优先级值来修改to-do-item的背景色。

修正后的完整代码 #

import { useState } from 'react';

// 定义ToDo类型（如果未定义）
interface ToDo {
  title: string;
  description: string;
  // duedate: Date;
}

function ToDoItem(props: { toDo: ToDo; onDeleteToDo: () => void }) {
  // 用useState管理当前项的优先级，默认值设为'2'（Normal）
  const [priority, setPriority] = useState<string>('2');

  // 处理下拉框变化的函数，直接更新当前组件的状态
  const handleOptionsChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
    setPriority(event.target.value);
  };

  // 根据优先级生成对应的背景色样式
  const getContainerStyle = () => {
    switch (priority) {
      case '1':
        return { backgroundColor: '#ffebee' }; // 浅红色标识重要
      case '2':
        return { backgroundColor: '#ffffff' }; // 默认白色
      default:
        return {};
    }
  };

  return (
    <div className="to-do-item" id="to-do-item" style={getContainerStyle()}>
      <div className="checkbox-title-container">
        <div className="check-title-div">
          {/* 此处替换为你实际的Checkbox组件调用 */}
          {/* <Checkbox /> */}
          <h2 className="to-do-title">{props.toDo.title}</h2>
        </div>
        <div id="delete-div">
          <select 
            name="Priority" 
            className="select-field" 
            value={priority} 
            onChange={handleOptionsChange}
          >
            <option value='1'>Important</option>
            <option value='2'>Normal</option>
          </select>
          <button id="delete" onClick={props.onDeleteToDo}>
            Delete
          </button>
        </div>
      </div>
      <div className="description-box">
        <span className="description">{props.toDo.description}</span>
      </div>
      <br />
      <span className="to-do-date">
        {/* {props.toDo.duedate.toLocaleDateString()} */}
      </span>
    </div>
  );
}

关键修正点 #

• 状态管理：用useState在ToDoItem内部维护优先级状态，无需依赖父组件传递setState。
• 事件处理：handleOptionsChange直接更新当前组件的priority状态，绑定到select的onChange事件。
• 动态样式：通过getContainerStyle函数根据当前优先级返回对应背景色样式，赋值给to-do-item的style属性。
• 类型严谨性：修正props类型定义，去掉冗余any，明确事件参数类型为React.ChangeEvent<HTMLSelectElement>。

扩展：优先级状态提升到父组件 #

如果需要将优先级保存到ToDo数据或共享给其他组件，可将状态提升到父组件：

// 父组件示例
function ToDoList() {
  const [todos, setTodos] = useState<(ToDo & { priority?: string })[]>([
    { title: '示例任务', description: '这是一个测试任务', priority: '2' }
  ]);

  // 更新指定todo的优先级
  const updateTodoPriority = (index: number, priority: string) => {
    const newTodos = [...todos];
    newTodos[index].priority = priority;
    setTodos(newTodos);
  };

  return (
    <div>
      {todos.map((todo, index) => (
        <ToDoItem
          key={index}
          toDo={todo}
          onDeleteToDo={() => {/* 实现删除逻辑 */}}
          priority={todo.priority || '2'}
          onPriorityChange={(priority) => updateTodoPriority(index, priority)}
        />
      ))}
    </div>
  );
}

// ToDoItem组件的props类型
interface ToDoItemProps {
  toDo: ToDo & { priority?: string };
  onDeleteToDo: () => void;
  priority: string;
  onPriorityChange: (priority: string) => void;
}

function ToDoItem(props: ToDoItemProps) {
  const handleOptionsChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
    props.onPriorityChange(event.target.value);
  };

  const getContainerStyle = () => {
    switch (props.priority) {
      case '1':
        return { backgroundColor: '#ffebee' };
      case '2':
        return { backgroundColor: '#ffffff' };
      default:
        return {};
    }
  };

  return (
    <div className="to-do-item" id="to-do-item" style={getContainerStyle()}>
      {/* 其余JSX结构与之前一致，select的value改为props.priority */}
      <select 
        name="Priority" 
        className="select-field" 
        value={props.priority} 
        onChange={handleOptionsChange}
      >
        <option value='1'>Important</option>
        <option value='2'>Normal</option>
      </select>
      {/* 其他内容 */}
    </div>
  );
}

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