按下回车键时更新输入值的问题

Question

我正在基于ReactJS的应用程序中创建一个包含Material Input组件的组件，该组件允许用户键入单词，然后在按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,
};

Answer 1

您应该阅读有关受控组件的信息 。 在handleChange函数中，仅在按下Enter键时才更新状态。 在其他情况下，您也应该使用事件的值来更新state.inputValue。