입력 키를 눌렀을 때 입력 값을 업데이트 할 때 문제가 발생했습니다.

Question

ReactJS 기반 응용 프로그램에서 입력 키를 누르면 사용자가 단어를 입력하고 표시 할 수있는 재료 입력 구성 요소가 포함 된 구성 요소가 생성됩니다. 동일한 입력 구성 요소의 칩으로

첫 번째 단어를 쓰고 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도 이벤트의 값으로 업데이트해야합니다.