我正在使用React和Typescript处理一个待办事项列表。当在选项选择下拉列表（prioritySelect）中选择优先级时，我试图返回一个不同颜色的div。我已经在ToDoItem JSX元素中插入了一个函数。我希望prioritySelect组件更改“to-do-item”中div的背景颜色，以表示其重要性。
我尝试添加handleOptionsChange函数并在底部的div返回中调用它，但在尝试添加handleOptionsChange时不断遇到错误，我不确定原因。
//返回DO组件的TODOITEM
`function ToDoItem(props: { toDo: ToDo; onDeleteToDo: any; prioritySelect: any;}) {`///尝试创建调用优先级低于
`handleOptionsChange:any; setState:any;}) {
handleOptionsChange = (event: any) => {
props.setState({
option: event.target.value
});
}`
`return (
<div className="to-do-item" id="to-do-item">
<div className="checkbox-title-container">
<div className="check-title-div">
{Checkbox()}
<h2 className="to-do-title">{props.toDo.title}</h2>
</div>
<div id="delete-div">`//选择下面的优先级选项
`<select name="Priority" className="select-field" value={props.prioritySelect.option} onChange={props.handleOptionsChange}>
<option className="important" value='1'>Important</option>
<option selected 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>）; }'
我尝试在返回下面的JSX组件时调用handleOptionsChange，为了可读性起见，我删除了to-do-item div中的其余组件
`<div className="to-do-item" id="to-do-item">
{prioritySelect={handleOptionsChange}} </div>
<div>`
1条答案
按热度按时间btqmn9zl1#
看起来您试图将handleOptionsChange函数作为一个 prop 从父组件传递到ToDoItem组件，但实际上并没有在JSX代码中传递该函数。
你可以试试这个：
这样，您就可以将prioritySelect对象作为一个属性传递给ToDoItem组件。handleOptionsChange函数在ToDoItem组件中定义，当选择下拉列表发生更改时将调用该函数。该函数更新prioritySelect对象的状态，然后可以使用该对象相应地设置div的样式。