如何检查 reactjs 中警报中的 eles 条件

Question

in my below code i have one field and one button and without fill the text filed then alert msg is show plz fill the input text.

right now in my code when i submit the button without input text filled then alert is not show.

How can we do that. anybody help me out this.

My full code https://codesandbox.io/s/staging-microservice-w8bfz

render() {
    return (
      <div className="App">
        Name <input type="text"  />
        
        <button className="btn btn-danger" onClick={this.handleClick}>
          submit
        </button>
      </div>
    );
  }

handleClick = (event) => {
  console.log('test')
  };

Answer 1

It's quite simple. You need to use a state variable for this.

Explanation:

• I have defined state variable name and used that in textbox
• On change of input value I am assigning input text inside name variable
• And then on handleClick, checking whether it's empty or not and based on that showing alert box

Working example: Codesandbox

Solution

 constructor(props) {
    super(props);
    this.state = { 
       name: '' 
    };
  }


  handleClick = () => {    
    if (!this.state.name) {
      alert('Please enter');
    }
  };
  render() {
    return (
      <div className="App">
        Name{" "}
        <input
          type="text"
          value={this.state.name}
          onChange={(e) => this.setState({ name: e.target.value })}
        />
        <button className="btn btn-danger" onClick={this.handleClick}>
          submit
        </button>
      </div>
    );
  }

Answer 2

You need to have state inorder to make the input field (name) controlled.

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { name: "" };
  }

  handleClick = (event) => {
    if (!this.state.name) {
      alert("Name should not be empty !");
    }
  };
  changeHandler = (event) => {
    this.setState({ name: event.target.value });
  };

  render() {
    return (
      <div className="App">
        Name :
        <input
          id="name"
          type="text"
          placeholder="Name"
          name="aname"
          value={this.state.name}
          onChange={this.changeHandler}
        />
        <button className="btn btn-danger" onClick={this.handleClick}>
          submit
        </button>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);