在 this.setState 之后 Typeahead 文本输入未重置

Question

我正在使用 typeahead 创建一个监视列表，以建议潜在的选项作为用户类型。用户提交后进入关注列表就好了，但文本框没有重置。

我尝试在提交后关注this 调用this.setState({ taskName: '' });。

抱歉，如果这是一个明显的问题，我很难理解反应状态/如何解决问题。

import React from "react";
import { Typeahead } from 'react-bootstrap-typeahead';
import ReactDOM from 'react-dom';
import options from './stocklist';

import 'react-bootstrap-typeahead/css/Typeahead.css';
import './styles.css';


export default class addWatchlistForm extends React.Component {
  state = {
    taskName: ""
  };

  checkEnterKey(e){
    console.log('checkEnterKey')
    var keyCode = e.which || e.keyCode;
    if(keyCode == 13){
      console.log('checkEnterKey')
      if(this.state.taskName.trim() !== ""){
          this.props.newTask(this.state.taskName)
      }
    }
  };

  updateTaskName = e => {
    console.log(e);   
    this.setState({ taskName: e.length > 0 ? e[0].ticker : "" });
    console.log('updateTaskName')

  };

  updateTask = e => {
    this.setState({taskName: e.target.value})
    console.log('updateTask')
    
  };

  handleAddTask = e => {
    let name = e.target.value;
    if (this.state.taskName.trim() !== "")
      this.props.newTask(name);
      console.log('handleAddTask')
      this.setState({ taskName: '' });
  };

  buttonAddTask = e =>{
    let name = e.target.value
    if(this.state.taskName.trim() !== "")
      this.props.newTask(this.state.taskName)
      this.state.taskName = "";
      this.setState({ taskName: e.length > 0 ? e[0].ticker : "" });
      console.log(this.state.taskName)
      console.log('buttonAddTask')
  };

  emptyInput = () => {
    this.setState({ taskName: '' });
    console.log('empty input')
  };

  render() {
    return (
      <div className="row">
        <div className="col-md-6 col-md-offset-3">
          <div style={{ margin: "20px" }}>
            <div className="row">
              <div className="col-md-6">
                <Typeahead
                  id="my-typeahead-id"
                  placeholder=""
                  onChange={this.updateTaskName}
                  onOptionSelected={this.handleAddTask, this.emptyInput}
                  value={this.state.taskName}
                  onKeyDown={e => this.checkEnterKey(e), this.emptyInput}
                  labelKey={option =>
                    `${option.ticker} ${option.security_type} `
                  }
                  options={options}
                />
              </div>
              <div className="col-md-4">
                <button
                  type="button"
                  className="btn btn-primary"
                  onClick={this.buttonAddTask}
                  onKeyPress={e => this.checkEnterKey(e)}
                >
                  Add New...
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  };
};

Answer 1

使用 ref 解决了这个问题here

import React from "react";
import { Typeahead } from 'react-bootstrap-typeahead';
import ReactDOM from 'react-dom';
import options from './stocklist';

import 'react-bootstrap-typeahead/css/Typeahead.css';
import './styles.css';


export default class addWatchlistForm extends React.Component {
  
  constructor(props){
        super(props)
        this.state = {
            taskName:""
            };
    this._typeahead = React.createRef();
    };

  checkEnterKey = e => {
    console.log('checkEnterKey')
    var keyCode = e.which || e.keyCode;
    if(keyCode == 13){
      console.log('checkEnterKey')
      if(this.state.taskName.trim() !== ""){
          this.props.newTask(this.state.taskName)
      }
    }
  };

  updateTaskName = e => {
    console.log(e);   
    this.setState({ taskName: e.length > 0 ? e[0].ticker : "" });
    console.log('updateTaskName')

  };

  updateTask = e => {
    this.setState({taskName: e.target.value})
    console.log('updateTask')
    
  };


  buttonAddTask = e =>{
    let name = e.target.value
    if(this.state.taskName.trim() !== "")
      this.props.newTask(this.state.taskName)
      console.log('buttonAddTask')
      this.setState({ taskName: '' });
      this._typeahead.current.clear();
  };

  emptyInput = e => {
    this.setState({ taskName: '' });
    console.log('empty input')
  };

  render() {
    return (
      <div className="row">
        <div className="col-md-6 col-md-offset-3">
          <div style={{ margin: "20px" }}>
            <div className="row">
              <div className="col-md-6">
                <Typeahead
                  ref={this._typeahead}
                  id="my-typeahead-id"
                  placeholder=""
                  onChange={this.updateTaskName}
                  onOptionSelected={this.handleAddTask, this.emptyInput}
                  value={this.state.taskName}
                  onKeyDown={e => this.checkEnterKey(e), this.emptyInput}
                  labelKey={option =>
                    `${option.ticker} ${option.security_type} `
                  }
                  options={options}
                />
              </div>
              <div className="col-md-4">
                <button
                  type="button"
                  className="btn btn-primary"
                  onClick={this.buttonAddTask}
                  onKeyPress={e => this.checkEnterKey(e)}
                >
                  Add New...
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  };
};