Question

我在基于ReactJS的应用程序中创建了一个包含Material Input组件的组件，该组件允许用户键入单词，然后在按下回车键时显示它们，作为同一输入组件中的芯片。

问题在于，在写完第一个单词并按回车键后，显示第一个芯片，但输入（''）的更新状态被冻结，用户无法继续输入新单词。

如果有人知道如何处理这个问题，我将非常感激。

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函数中，仅在按下enter时才更新状态。在其他情况下，您应该使用事件中的值更新state.inputValue。

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

1 个答案: