2017-01-27 4 views
2

저는 ReactJS의 초보자입니다. 그것은 작동ReactJS 구성 요소 세트 상태가 아무 것도하지 않습니까?

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

    this.state = {term: ''}; 
    } 

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

하지만 문제는 내가 입력의 변경된 값을 얻을 수있다 : 나는 다음과 같은 검색 창을 할 노력하고있어. 그게 뭐가 잘못 됐어? 해결책을 찾지 못했습니다. 당신의 도움을 주셔서 감사합니다.

+0

실제로'render()'에서'state.term'을 사용하지 않습니다. – lux

+0

덕분에 오류가 발생하는 이유를 알았습니다. – handroll

답변

3

입력 값을 설정하지 않았습니다. 상태에 따라 값이 설정되는 제어 된 구성 요소로 입력을 변경해야하므로 상태가 변경 될 때만 값이 변경됩니다.

<input 
     value = { this.state.term } 
     onChange= { (event) => this.setState({ term: event.target.value }) } /> 

따라서 this.state 렌더링하는 성분이 발생하고 그 때 this.state.term의 새로운 값으로 설정되어있는 요소 (예를 들어 입력 된) 값을 다시 렌더링한다.

+0

나는 효과가있었습니다. explenation 주셔서 감사합니다. – handroll

2

입력에 값을 지정하지 않습니다.

<input value={this.state.term} onChange={ event => this.setState({ term: event.target.value })} />