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

Question

I am creating, in my ReactJS-based application, a component that contains a Material Input component that allows users to type words and then display them, when the enter key is pressed, as chips in the same input component.

The problem is that, after writing the first word and pressing enter, the first chip is displayed, but the updated state of the input ('') is frozen and users cannot proceed entering new words.

If anyone know how to deal with such issue I would be extremely thankful.

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

You should read about Controlled Components . In the handleChange function, you are updating state only when enter was pressed. In other cases, you should update state.inputValue too with a value from an event.