React 제어 컴포넌트를 어떻게 업데이트 할 수 있습니까?

Question

Stephen Grider의 Udemy "Modern React with Redux"과정에서 입력 요소의 value이 해당 값을 설정하는 onChange 이벤트로 변경되는 예제가 제공됩니다.

onChange= function(event){ 
    this.setState({ term: event.target.value}) 
} 

및 입력 구성 요소의 모양

: 상태가 event.target.value에 "하드"나는 때 event.target.value가 내 눈으로 업데이트 할 수있는 방법을 이해하지 못하는

<input value = {this.state.term} /> 

이다 특히, 기능은 같다 즉, 구성 요소가 렌더링 될 때 빈 문자열이 반환됩니다. 따라서 state.term이 ""이고 입력의 value이 덮어 쓰여지고 "설정 됨"이 state.term으로 설정되면 어떻게 전혀 업데이트 할 수 있습니까?

import React, { Component } from 'react'; 

class SearchBar extends Component { 
    constructor (props) { 
     super(props); 

     this.state = { term: '' }; 
    } 
    render() { 
     return(
      <div> 
       <input 
        value = {this.state.term} 
        onChange={event => this.setState({ term: event.target.value})} /> 
      </div> 
     ); 
    } 

} 

export default SearchBar; 

편집 : 기본적으로 내 질문에 내려 온다 생각은 : <input> 요소의 value 같은 일 event.target.value로인가요?

EDIT2 : 단어의 자바 참조 통과 의미, 즉 두 객체가 같은 객체에서 동일한 값을 참조하고 있습니까?

Answer 1

1. initial value = ''
2. 사용자는 'r'
3. 당신이 event.target.value에 따라 상태를 설정 누른다. 새로운 state.term은 'r'
4. 상태 변경 트리거 구성 요소 업데이트입니다. 사용자의 입력 값은 this.state.term 또는

'r' 당신의 편집에 대답하는 것입니다

예를 더 - 더 value는 값이 설정되어 state.term을 사용하지만 때문에 event.target.value와 동일하게 끝나게하지 않습니다 event.target.value

event.target.value => 결정 =>state => 결정 =>input[value]