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

Question

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

您应该阅读 Controlled Components 。在handleChange函数中，仅当按下回车键时才更新状态。在其他情况下，您也应该使用事件中的值更新 state.inputValue。