Проверка, является ли первая буква строки прописной

Я пытаюсь проверить, является ли первая буква строки прописной.

charAt() у меня не работает, если у вас есть другое решение для проверки того, является ли первая буква прописной, я буду благодарен.

Пробовал так проверять - this.state.firstName[0] === this.state.firstName[0].toUpperCase() но у меня тоже не работает


class Profile extends Component {
  state = {
    details: {
      firstName: '',
      lastName: '',
      ID: '',
      Email: ''
    }
  };

  OnSubmit = e => {
    e.preventDefault();
    if (
      this.state.firstName.charAt(0) ===
      this.state.firstName.charAt(0).toUpperCase()
    ) {
      console.info('error');
    }
  };

  OnChange = e => {
    e.preventDefault();
    this.setState({
      details: { ...this.state.details, [e.target.name]: e.target.value }
    });
  };

  render() {
    return (
      <div>
        <div className = "container text-center mt-4" style = {{ width: '500px' }}>
          <form className = "px-4 py-3" onSubmit = {this.OnSubmit}>
            <div className = "form-group">
              <label>First Name:</label>
              <input
                type = "text"
                className = "form-control"
                onChange = {this.OnChange}
                name = "firstName"
              />
            </div>
            <div className = "form-group">
              <label>Last Name:</label>
              <input
                type = "text"
                className = "form-control"
                onChange = {this.OnChange}
                name = "lastName"
              />
            </div>
            <div className = "form-group">
              <label>ID Number:</label>
              <input
                type = "text"
                className = "form-control"
                onChange = {this.OnChange}
                name = "ID"
              />
            </div>
            <div className = "form-group">
              <label>Email:</label>
              <input
                type = "text"
                className = "form-control"
                onChange = {this.OnChange}
                name = "Email"
              />
            </div>
            <button type = "submit" className = "btn btn-secondary mt-3">
              Check
            </button>
          </form>
        </div>
      </div>
    );
  }
}

export default Profile;

charAt () дает мне ошибку - «Uncaught TypeError: невозможно прочитать свойство« charAt »неопределенного»

Похоже, что есть объект сведений, который содержит firstName и другие свойства; this.state.details.firstName.charAt(0) === this.state.details.firstName.charAt(0).toUpperCase() работает?

Chris Forrence 04.06.2019 15:22

Вы не пропустили details в своем this.state.firstName звонке? как this.state.details.firstName.charAt(0) ?

Frankich 04.06.2019 15:23

Да, я пропустил детали.........

Dan 04.06.2019 15:28
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
2
3
479
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Простой способ проверить, является ли первая буква в строке прописной. Проверьте демо ниже

import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';

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

  componentWillMount()
  {
    if (this.state.name[0] >= 'A' && this.state.name[0] <= 'Z')
      this.setState({ name: "First letter is uppercase" })
    else
      this.setState({ name: "First letter is NOT uppercase" })
  }

  render() {
    return (
      <div>
        <p>
          {this.state.name}
        </p>
      </div>
    );
  }
}

render(<App />, document.getElementById('root'));

Демо

Этот ответ учитывает только самый стандартный латинский алфавит, и буду не работает.

rorschach 04.06.2019 15:52
Ответ принят как подходящий

В состоянии у вас есть объект сведений, вы можете получить доступ к имени и фамилии через объект сведений.

class Profile extends Component {
      state = {
        details: {
          firstName: '',
          lastName: '',
          ID: '',
          Email: ''
        }
      };

      OnSubmit = e => {
        e.preventDefault();
        if (
          this.state.details.firstName.charAt(0) ===
          this.state.details.firstName.charAt(0).toUpperCase()
        ) {
          console.info('error');
        }
      };

      OnChange = e => {
        e.preventDefault();
        this.setState({
          details: { ...this.state.details, [e.target.name]: e.target.value }
        });
      };

      render() {
        return (
          <div>
            <div className = "container text-center mt-4" style = {{ width: '500px' }}>
              <form className = "px-4 py-3" onSubmit = {this.OnSubmit}>
                <div className = "form-group">
                  <label>First Name:</label>
                  <input
                    type = "text"
                    className = "form-control"
                    onChange = {this.OnChange}
                    name = "firstName"
                  />
                </div>
                <div className = "form-group">
                  <label>Last Name:</label>
                  <input
                    type = "text"
                    className = "form-control"
                    onChange = {this.OnChange}
                    name = "lastName"
                  />
                </div>
                <div className = "form-group">
                  <label>ID Number:</label>
                  <input
                    type = "text"
                    className = "form-control"
                    onChange = {this.OnChange}
                    name = "ID"
                  />
                </div>
                <div className = "form-group">
                  <label>Email:</label>
                  <input
                    type = "text"
                    className = "form-control"
                    onChange = {this.OnChange}
                    name = "Email"
                  />
                </div>
                <button type = "submit" className = "btn btn-secondary mt-3">
                  Check
                </button>
              </form>
            </div>
          </div>
        );
      }
    }

    export default Profile;

Другие вопросы по теме