如何添加条件以防止在React Todo App中添加空白任务？

Question

I have created a simple todo app here, when press enter button the task will push to an array but when add press without adding any text to the input area, still the bullet symbol will appear.

How to prevent this by using if condition?

import React, { Component } from "react";

class Basictodo2 extends Component {
  constructor(props) {
    super(props);
    this.state = {
      title: "Map arrray when press the enter button ",
      input: "",
      list: []
    };
  }

  changeHandler = t => {
    this.setState({
      input: t.target.value
    });
  };

  pressEnter = e => {
    //  var l = this.state.list;
    var i = this.state.input;
    if (e.which === 13) {
      //    l.push(i)
      this.state.list.push(i);
      this.setState({
        //    list : l,
        list: this.state.list,
        input: ""
      });
      e.preventDefault();
    }
  };

  render() {
    var { title, input, list } = this.state;
    return (
      <div>
        <form>
          <h2>{title}</h2>
          <input
            onKeyDown={this.pressEnter}
            type="text"
            value={input}
            onChange={this.changeHandler}
          />

          <div>
            <ol>
              {list.map(data => {
                return <li>{data}</li>;
              })}
            </ol>
          </div>
        </form>
      </div>
    );
  }
}

export default Basictodo2;

Answer 1

Try using this approach

if i is not null then only this will execute

var i = this.state.input;
if(i){//then do something

  if (e.which === 13) {
  //    l.push(i)
  this.state.list.push(i);
  }
}

Answer 2

If you don't wont to empty values to be submitted you should make the field as required by adding required attribute to the input field.

You can add if condition to check if value is not null before pushing to array like:

if(i) {
  // code to push to array
}

Answer 3

You can check i to see if it contains anything. Like this

   if (e.which === 13) {       
      if (i) {
        const list = [...this.state.list, i]; 

        this.setState({
          list,
          input: ""
        });
      }

      e.preventDefault();
    }

So on enter you check if i is not empty (empty strings are falsy ), and then you add it to your state. You prevent default either case so you don't refresh the page on empty input submit.

See this codesanbox for details: https://codesandbox.io/s/14jy6jmm04

Answer 4

First of all, you have a major mistake in your code, you are modifying the state without the setState() function. So delete this line of code:

this.state.list.push(i);

Next you need to retrieve the value of the input and check if it has a falsey value(0, empty string, null). If it does, you prevent the default behavior and return from the function. You can retrieve the value from the e.target.value

pressEnter = e => {
   var i = this.state.input;
    let value = e.target.value;
    if (e.which === 13) {
      if (!value) {
        e.preventDefault();
        return;
     }

After that you need to create a new array which will include the new input and update the state.

  this.setState({
    //    list : l,
    list: [...this.state.list, value], // this is a new array
    input: ""
  });

In the end you will also need to add a unique key to the 'ul' elements. You can use the index of the element in the list.

  {list.map((data, index) => {
    return <li key={index}>data</li>;
  })}

Here is a link to the working code:

https://codesandbox.io/s/5y0747y7yp