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函数中那样，它只是读取'Honolul' “

2）在实际注册我做出选择之前，我需要多次从我的选择下拉列表中进行选择。一旦它开始认识到我实际上正在进行选择，实际选择的值是非常随机的，很少我实际选择的。

3）我无法设置默认选择。默认情况下选择“Therapist”，因为我将其设置为selected。但是，如果我只是提交，“治疗师”不会作为州发送。在我写这篇文章时，我开始认为也许我只需要在构造函数中默认设置this.state={type:'Therapist'}，所以也许我刚刚回答了我自己的问题。

Mahalo的帮助。

Answer 1

因为您在上次状态更新之前记录它。在最后一个setState之后，你的handleChange函数没有被调用，因此你没有看到最后一个字母。即使你在setState调用行之后执行此操作，也无法赶上状态。要记录您的状态，最好在渲染中执行此操作。
在当前代码中，您甚至没有使用onSelect进行选择。更改它，并使用event.target.value而不是event.currentTarget.textContent。编辑：正如您在评论中提到的，如果您不想分开句柄逻辑，您可以像当前代码中所示一起完成此操作。
是的，你可以这样做。即使在官方文档中，也会按照您的想法解释：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>
      );
  }
}

使用Bootstrap和React的Buggy` <select>`和`</select> <input />`元素

1 个答案: