如何清除对输入表单上的“onKeyDown”做出反应的状态？答案

【问题标题】：How to clear state in react upon `onKeyDown` on an input form?如何清除对输入表单上的“onKeyDown”做出反应的状态？
【发布时间】：2018-11-15 18:28:27
【问题描述】：

我在 React 中有一个输入组件，通过按 Enter 键提交输入。我使用material-ui 组件作为我的组件的基础。在onKeyDown even 处理程序中，我通过将空字符串分配给组件状态中的唯一字段来清除状态。但是，这不起作用。我做错了什么？

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import InputBase from '@material-ui/core/InputBase';
import { withStyles } from '@material-ui/core/styles';
import { Link } from 'react-router-dom';
import { withRouter } from 'react-router-dom';
import { connect } from 'react-redux';

import { getAppInfo } from '../../actions/appActions.js';

const styles = theme => ({
  inputRoot: {
    color: 'inherit',
    width: '100%',
  }
})

class AppSearchBarInput extends Component {
  state = {
    appId: ''
  }

  onChange = e => {
    this.setState({ appId: e.target.value });
  }

  onKeyDown = e => {

    const { appId } = this.state;

    if (e.keyCode === 13) {
      this.props.getAppInfo({ appId });
      this.setState({
        appId: ''
      });
      this.props.history.push('/');
    }
  }

  render() {
    const { classes } = this.props;

    return (
      <InputBase
        placeholder="Search…"
        classes={{
          root: classes.inputRoot,
          input: classes.inputInput,
        }}
        onChange={this.onChange}
        onKeyDown={this.onKeyDown}
      />
    )
  }
}

const AppSearchBarWithStyles = withStyles(styles)(AppSearchBarInput);
const AppSearchBarWithStylesWithRouter = withRouter(AppSearchBarWithStyles);
export default connect(null, { getAppInfo })(AppSearchBarWithStylesWithRouter);

【问题讨论】：

标签： javascript reactjs redux state material-ui

【解决方案1】：

你需要设置Input的值，否则它不知道要显示什么变量并使用它自己的变量，这并不清楚。

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import InputBase from '@material-ui/core/InputBase';
import { withStyles } from '@material-ui/core/styles';
import { Link } from 'react-router-dom';
import { withRouter } from 'react-router-dom';
import { connect } from 'react-redux';

import { getAppInfo } from '../../actions/appActions.js';

const styles = theme => ({
  inputRoot: {
    color: 'inherit',
    width: '100%',
  }
})

class AppSearchBarInput extends Component {
  state = {
    appId: ''
  }

  onChange = e => {
    this.setState({ appId: e.target.value });
  }

  onKeyDown = e => {

    const { appId } = this.state;

    if (e.keyCode === 13) {
      this.props.getAppInfo({ appId });
      this.setState({
        appId: ''
      });
      this.props.history.push('/');
    }
  }

  render() {
    const { classes } = this.props;

    return (
      <InputBase
        placeholder="Search…"
        classes={{
          root: classes.inputRoot,
          input: classes.inputInput,
        }}
        onChange={this.onChange}
        onKeyDown={this.onKeyDown}
        value={this.state.appId}
      />
    )
  }
}

const AppSearchBarWithStyles = withStyles(styles)(AppSearchBarInput);
const AppSearchBarWithStylesWithRouter = withRouter(AppSearchBarWithStyles);
export default connect(null, { getAppInfo })(AppSearchBarWithStylesWithRouter);

【讨论】：

这行得通。这是因为我对组件使用了 material-ui 包还是 React 的东西？ value 属性如何与AppSearchBarInput 的状态相关联？
@hitchhiker 这是一种反应。既然这样有效，您会单击检查以将其标记为答案吗？谢谢:)
您能否详细说明解决方案？我想了解错误的原因，而不仅仅是修复它。
@hitchhiker 说的不是错误，输入标签提供了一个 value 属性，主要用于设置默认值，但通过反应，它允许您管理输入的状态因为通常他们提供自己的。 React 在这里有一些非常好的文档reactjs.org/docs/forms.html