Javascript 按下enter键时更新输入值的问题

我正在基于ReactJS的应用程序中创建一个组件，其中包含一个材质输入组件，允许用户键入单词，然后在按下enter键时将其显示为同一输入组件中的芯片

问题是，在写入第一个单词并按enter键后，会显示第一个芯片，但输入的更新状态被冻结，用户无法继续输入新单词

如果有人知道如何处理这样的问题，我将不胜感激

import React from 'react';
import PropTypes from 'prop-types';
import Textfield from 'components/Textfield';
import Input from 'material-ui/Input';
import Chip from 'components/Chip';

class ChipInput extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      valuesEntered: [],
      inputValue: undefined,
    };
  }

  handleChange = (ev) => {
    if (ev.key === 'Enter') {
      const elements = this.state.valuesEntered;
      elements.push(<Chip label={ev.target.value} onRequestDelete={() => {}} />);
      this.setState({
        valuesEntered: elements,
        inputValue: '',
      });
    }
  }

  render = () => (
    <Input
      name='chipInput'
      onKeyPress={this.handleChange}
      value={this.state.inputValue}
      startAdornment={
        <span style={{ display: 'inline-block !important' }}>
          {
            this.state.valuesEntered
          }
        </span>
      }
    />
  );
}

export default ChipInput;

ChipInput.propTypes = {
  defaultValues: PropTypes.array,
};

你应该读一下。在handleChange函数中，仅当按下enter键时才更新状态。在其他情况下，还应使用事件中的值更新state.inputValue