时间戳

首页 > 解决方案 > 如何在反应应用程序中为任务设置条件？

javascript - 如何在反应应用程序中为任务设置条件？

问题描述

在此处输入图像描述我想在复选框表单中添加一个重要条件。当用户添加一些任务并选中小复选框（这是重要任务的指示！）应在应用程序中以粗体显示。请问如何定义这样的条件？

function Form(props){
    const [name, setName ] = useState('');
    const [important, setImportant] = useState(false);
    
    function handleChangeImportant(e){
        console.log(e);
        e.preventDefault();
        setImportant(e.target.checked);
        if(important ){
            alert('this task is important');
            setName("");
        }
    };
    
    function handleChange(e) {
        setName(e.target.value);
    }

    function handleSubmit(e){
        e.preventDefault();
        //alert('Moin');
        if(name == ''){
            alert('Please enter a valid task name');
        }
        
        if(name !== ''){
            props.addTask(name);
            setName("");
        }
    }    
    return(
        <form onSubmit={handleSubmit}> 
            <h2 className="label-wrapper">
                <label htmlFor="new-todo-input" className="label__lg">
                    What needs to be done?
                </label>
            </h2>
            
            <input 
                type="text"
                id="new-todo-input"
                className="input input__lg"
                name="text"
                autoComplete="off"
                value={name}
                onChange={handleChange}                
            />
            
            <input
                type="checkbox"
                id="todo-0" 
                value={important}
                onChange={handleChangeImportant}                             
            /> Important
            
            <button type = "submit" className="btn btn__primary btn__lg">
                Add
            </button>
        </form>
    );
}

export default Form;

我渲染任务列表如下

在应用程序中，任务列表呈现如下。

const taskList = tasks.filter(FILTER_MAP[filter]).map(task => (
    <ToDo 
      id ={task.id} 
      name={task.name} 
      completed={task.completed}
      key ={task.id}
      toggleTaskCompleted={toggleTaskCompleted}
      deleteTask={deleteTask}
      editTask={editTask}
      />
      )
  );

标签： javascriptreactjs

解决方案

在您的Todo组件中添加另一个道具作为important，基于该设置任务标题的样式/类别粗体。

<ToDo 
      ...
      important={task.important}
      ...
      />

然后在显示任务名称的组件中：

<p style={{ fontWeight: props.important ? 'bold' : 'normal' }}>{props.name}</p>

推荐阅读