Блог

Как бы я мог помешать кому-либо ничего не добавлять в мой список дел?

AppTodo.JS

 import React, { Component } from "react";
import PropTypes from "prop-types";
export class AddTodo extends Component {
  state = {
    title: ""
  };

  onSubmit = e => {
    e.preventDefault();
    if (this.state.addTodo === "") {
      alert("??");
    } else {
      this.props.addTodo(this.state.title);
      this.setState({ title: "" });
    }
  };

  onChange = e => this.setState({ title: e.target.value });

  render() {
    return (
      <form onSubmit={this.onSubmit} stlye={{ display: "flex" }}>
        <input
          type="text"
          name="title"
          style={{ flex: "10", padding: "5px" }}
          placeholder="Add Things Todo..."
          value={this.state.title}
          onChange={this.onChange}
        />
        <input
          type="submit"
          value="Submit"
          className="btn"
          style={{ flex: "1" }}
        />
      </form>
    );
  }
}

// Prop Types
AddTodo.propTypes = {
  addTodo: PropTypes.func.isRequired
};

export default AddTodo;
  

Я новичок в React, просто делаю это ради удовольствия и потратил несколько часов, пытаясь заставить условные выражения работать в методе onSumbit и даже в методе render (), но, похоже, ничего не получается.

Заранее спасибо.

У вас нет addTodo переменной в вашем состоянии, но у вас есть title переменная.

Измените this.state.addTodo === "" на this.state.title === "" , и это будет работать так, как ожидалось.

 class AddTodo extends React.Component {
  state = {
    title: ""
  };

  onSubmit = e => {
    e.preventDefault();
    if (this.state.title === "") {
      alert("??");
    } else {
      this.props.addTodo(this.state.title);
      this.setState({ title: "" });
    }
  };

  onChange = e => this.setState({ title: e.target.value });

  render() {
    return (
      <form onSubmit={this.onSubmit} stlye={{ display: "flex" }}>
        <input
          type="text"
          name="title"
          style={{ flex: "10", padding: "5px" }}
          placeholder="Add Things Todo..."
          value={this.state.title}
          onChange={this.onChange}
        />
        <input
          type="submit"
          value="Submit"
          className="btn"
          style={{ flex: "1" }}
        />
      </form>
    );
  }
}

ReactDOM.render(
  <AddTodo addTodo={todo => console.log(`Added todo: ${todo}`)} />,
  document.getElementById("root")
);  

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>