Блог

Главная - Вопросы по программированию - Как предотвратить добавление пустой задачи в код react?

Как предотвратить добавление пустой задачи в код react?

#javascript #reactjs

#javascript #reactjs

Вопрос:

Я хотел бы запретить моему приложению предотвращать добавление пустой задачи. Следуя коду, который добавляет новую задачу в массив. Могу я спросить, пожалуйста, как поставить условие, чтобы предотвратить добавление пустой задачи?

Приложение построено на основе руководства Mozilla для приложения react.

 import React, {useState} from 'react';

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

    function handleSubmit(e){
        e.preventDefault();
        //alert('Moin');
        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;

```

Комментарии:

1. if(task) { //add to array }

2. Могу я спросить, пожалуйста, куда поместить фрагмент кода?

Ответ №1:

Проверьте, не является ли имя пустым.

    function handleSubmit(e){
        e.preventDefault();
        //alert('Moin');
        if(name !==''){
        props.addTask(name);
        setName("");
     }
    }

Комментарии:

1. Это сработало, но во всплывающем окне не было уведомления. функция handleSubmit(e){ e.preventDefault(); //alert(‘Moin’); if(name !== «){ props.AddTask(имя); alert(‘Пожалуйста, введите допустимое имя задачи’); setName(«»); } }

2. да, вы можете добавить уведомление alert в соответствии с вашими требованиями.

Ответ №2:

 function handleSubmit(e) {
  e.preventDefault();
  if (name === '') return;
  props.addTask(name);
  setName('');
}
Метки: