Глючные элементы `<select>` и `<input>` с Bootstrap и React

Question

У меня есть <select>, который я пытаюсь использовать с моим реактивным проектом.Это очень глючит, и мне трудно понять, где находится источник.Я искал многочисленные сообщения, попробовал некоторые из предложений, но ни одно из них не работает в моем случае.

Вот мой код:

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Link } from 'react-router-dom';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { fetchDoctors } from '../actions/index';
import compose from 'recompose/compose';

class SearchBar extends Component {
  constructor(props) {
    super(props);
    this.selectButtonName = React.createRef();
    this.state = {
      type: '',
      location: ''
    };

    this.handleChange = this.handleChange.bind(this);
    this.onFormSubmit = this.onFormSubmit.bind(this);
    this.onSelect = this.onSelect.bind(this);
  }

  handleChange(event) {
    const target = event.target;
    const value = target.value;
    const name = target.name;
    console.log(this.state)
    this.setState({ [name]: value });
  }

  onFormSubmit(event) {
    this.props.history.push('/doctors/result');
    event.preventDefault();
    this.props.fetchDoctors(this.state);

  }
  onSelect(event) {
    this.setState({ type: event.currentTarget.textContent });
  }

  render() {
    return (
      <div className="container">
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
        <div className="row justify-content-md-center">
          <div className="col-8">
            <div className="jumbotron">
              <h2 className="display-4">We Are Here For You</h2>
              <p className="lead">Find Help</p>
              <form onSubmit={this.onFormSubmit} action="/doctors/result">
                <div className="form-group">
                  <div className="input-group">
                    <div className="input-group-prepend">

                      <select onChange={this.handleChange} value={this.state.selectedValue} name="type" className="custom-select">
                        <option name="type" value="Therapist" selected>Therapist</option>
                        <option name="type" value="Psychiatrist">Psychiatrist</option>
                        <option name="type" value="All">All</option>
                      </select>
                    </div>
                    <input
                      type="text"
                      className="form-control"
                      aria-label="Text input with dropdown button"
                      placeholder="Search by City"
                      name="location"
                      id="locationSearch"
                      value={this.state.location}
                      onChange={this.handleChange}
                    />
                  </div>
                </div>
                <button className="btn btn-primary btn-sm" type="submit" role="button">
                  Search
                </button>
              </form>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators({ fetchDoctors }, dispatch);
}

export default connect(
  null,
  mapDispatchToProps
)(SearchBar);

Проблемы, с которыми я сталкиваюсь, следующие:

1) Мой вводимый текст всегда кажется на один символ меньше, чем я ввожу.Например, если я наберу слово «Гонолулу», к тому времени, когда я наберу последнее «и», если я утешу журнал this.state, как у меня в функции handleChange, он просто читает «Гонолул»

2) Мне нужно выбрать из выпадающего списка несколько раз, прежде чем он действительно зарегистрирует, что я сделал выбор.Как только он начинает распознавать, что я на самом деле делаю выбор, фактическое выбранное значение довольно случайное и редко то, что я на самом деле выбрал.

3) Я не могу установить выбор по умолчанию.«Терапевт» выбран по умолчанию, так как он имеет значение selected.Однако, если я просто подчинюсь, «Терапевт» не будет отправлен как государство.Когда я пишу это, я начинаю думать, что, возможно, мне просто нужно установить this.state={type:'Therapist'} по умолчанию в конструкторе, поэтому, возможно, я только что ответил на свой вопрос по этому вопросу.

Махало за вашу помощь.

Answer 1

1. Поскольку вы регистрируете его до последнего обновления состояния.После последнего setState ваша функция handleChange не вызывается, поэтому вы не видите последнюю букву.Даже если вы сделаете это после вызова линии setState, он не сможет перехватить состояние.Для регистрации вашего состояния лучше сделать это в рендере.

2. В текущем коде вы даже не используете onSelect для выбора.Измените его и используйте event.target.value вместо event.currentTarget.textContent.Изменить: Как вы упомянули в комментариях, если вы не хотите разделять логику дескриптора, вы можете сделать это вместе, как показано в текущем коде.

3. Да, вы можете сделать это,Даже в официальной документации это объясняется так, как вы думаете: https://reactjs.org/docs/forms.html#the-select-tag

Вот несколько более чистая рабочая версия вашего приложения:

class SearchBar extends React.Component {
  state = {
    type: 'Therapist',
    location: ''
  };

  handleChange = (e) => {
    const { name, value } = e.target;
    this.setState({ [name]: value });
  }

  render() {
    console.log( this.state );
    return( 
      <div>
        <form onSubmit={this.onFormSubmit} action="/doctors/result">
          <select name="select" onChange={this.handleChange} value={this.state.type} name="type" className="custom-select">
            <option value="Therapist">Therapist</option>
            <option value="Psychiatrist">Psychiatrist</option>
            <option value="All">All</option>
          </select>
          <input
            type="text"
            className="form-control"
            aria-label="Text input with dropdown button"
            placeholder="Search by City"
            name="location"
            id="locationSearch"
            value={this.state.location}
            onChange={this.handleChange}
          />
          <button className="btn btn-primary btn-sm" type="submit">
            Search
          </button>
        </form>
      </div>
      );
  }
}