javascript - 在 this.setState 之后 Typeahead 文本输入未重置
问题描述
我正在使用 typeahead 创建一个监视列表,以建议潜在的选项作为用户类型。用户提交后,它进入监视列表就好了,但文本框没有重置。
提交后,我尝试遵循此调用。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>
);
};
};
解决方案
使用此问题中提到的 ref 解决了这个问题
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>
);
};
};
推荐阅读
- javascript - 无法使用 jQuery 的替换功能摆脱反斜杠
- optimization - 解决优化问题的 Scipy 代码(编写了 gurobi 代码!)
- python - 在 Pyspark 中包括特殊字符和忽略大写字母的情况下计算单词?
- excel - Excel VBA 搜索和打印功能
- python - Python:列出函数内部使用的静态变量
- python - 使用自适应路径在 Python 中自动读取 .csv 文件
- retrofit2 - 从目录路径将图像上传到 Android Studio Recyclerview
- c - 避免使用 .data 段
- git - 在 Git 中,当源分支历史已更改时,如何从功能分支中变基?
- c# - 如何在不使用 C# 循环的情况下打印我的名字 100 次?