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

Posted 2023-02-22

【中文标题】在 this.setState 之后 Typeahead 文本输入未重置

【英文标题】：Typeahead Text input not resetting after this.setState

【发布时间】：2021-02-21 19:59:22

【问题描述】：

我正在使用 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>
    );
  ;
;

【参考方案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>
    );
  ;
;