Enterキーを押したときに入力値が更新される問題

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関数では、enterが押されたときのみ状態を更新します。それ以外の場合は、state.inputValueもイベントの値で更新する必要があります。