[英]How to add if condition to prevent blank task adding in react todo app?
[英]How to prevent adding empty task in react code?
我想阻止我的应用程序以防止添加空任务。 遵循在数组中添加新任务的代码。 请问如何设置条件以防止添加空任务?
该应用程序基于 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;
```
检查名称是否不为空。
function handleSubmit(e){
e.preventDefault();
//alert('Moin');
if(name !==''){
props.addTask(name);
setName("");
}
}
function handleSubmit(e) { e.preventDefault(); if (name === '') return; props.addTask(name); setName(''); }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.