Question

我在这里创建了一个简单的待办事项应用程序，当按Enter键时，任务将推送到一个数组，但是在不按任何键向输入区域添加内容的情况下，按添加键仍会出现项目符号。

如何通过使用if条件来防止这种情况？

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

尝试使用这种方法

如果我不为空，那么只有这将执行

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

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

Answer 2

如果您不想清空要提交的值，则应根据需要通过在输入字段中添加xyz属性来创建该字段。

您可以添加if条件，以在推入数组之前检查value是否不为null

echo "show collections" | mongo <dbname> --quiet | grep -v "system.indexes" | xargs -I {} mongodump --db <dbname> --collection {} --query "{}"

Answer 3

您可以检查<td style="background-image:url(./demoImage.jpg);background-repeat:no-repeat;background-size:250px 180px; width: 250px; height: 180px;"></td>以查看其中是否包含任何内容。像这样

因此，在if (e.which === 13) { if (i) { const list = [...this.state.list, i]; this.setState({ list, input: "" }); } e.preventDefault(); }上检查enter是否不为空（空字符串为falsy），然后将其添加到您的状态。您可以防止出现默认情况，这样就不会在空输入提交时刷新页面。

有关详细信息，请参见此代码sanbox：https://codesandbox.io/s/14jy6jmm04

Answer 4

首先，您在代码中犯了一个重大错误，您在不使用setState（）函数的情况下修改状态。因此，删除以下代码行：

this.state.list.push(i);

接下来，您需要检索输入的值，并检查输入的值是否为false（0，空字符串，null）。如果是这样，您将阻止默认行为并从函数返回。您可以从e.target.value

检索值

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

之后，您需要创建一个新数组，其中将包括新输入并更新状态。

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

最后，您还需要向'ul'元素添加唯一键。您可以使用列表中元素的索引。

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

以下是工作代码的链接：

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

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

4 个答案: