Problem beim Aktualisieren Eingabewert beim Drücken der Eingabetaste

Question

Ich erstelle in meiner ReactJS-basierten Anwendung eine Komponente, die eine Materialeingabe-Komponente enthält, mit der Benutzer Wörter eingeben und sie dann anzeigen können, wenn die Eingabetaste gedrückt wird. als Chips in der gleichen Eingabekomponente.

Das Problem ist, dass nach dem Schreiben des ersten Wortes und Drücken der Eingabetaste der erste Chip angezeigt wird, aber der aktualisierte Status der Eingabe ('') eingefroren ist und Benutzer nicht fortfahren können, neue Wörter einzugeben.

Wenn jemand weiß, wie man mit solch einem Problem umgehen kann, wäre ich sehr dankbar.

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

Sie sollten über Controlled Components lesen. In der Funktion handleChange aktualisieren Sie den Status nur, wenn Sie die Eingabetaste drücken. In anderen Fällen sollten Sie auch state.inputValue mit einem Wert aus einem Ereignis aktualisieren.