javascript - 有没有办法在 checkBox 上的 onchange 事件上重新渲染组件

Question

在这里，我试图通过 onchange 事件将文本的样式更改为行槽，但组件没有重新渲染，样式也没有改变。

import React from 'react';
import {useDispatch} from 'react-redux'
import {DelAction,CompleteAction} from '../Action'
function Todo(props) {
    //assigning dipsatch 
    const dispatch=useDispatch();
    //Delete the Todo form the store

    const getStyle=()=>{
       return{ 
       textDecoration:props.todo.completed?'line-through':'none',
       backgroundColor:'rgb(20%,50%,60%)',
       borderBottom:'1px #000 dotted',
       }
   }
    return (
        <div style={getStyle()} >
            <p style={{fontSize:'20px'}}>            
            <input type="checkbox"  onChange={()=> dispatch(CompleteAction(props.todo.id))}/>
            <button style={{float:'right'}} onClick={ () => dispatch(DelAction(props.index) )} >Delete</button>
            </p>

        </div>
    );
}

export default Todo;

标签： javascriptcssreactjsonchangererender