ReactJs : 자식 구성 요소에서 부모 구성 요소에 이르는 데이터

Question

나는 React를 배우기 시작했으나이 오류를 파악하는 데 어려움이 있습니다. 부모 구성 요소가 있습니다 날씨 및 하위 구성 요소 WeatherForm입니다. 부모 구성 요소에서 자식 구성 요소에 대한 속성을 설정합니다. 하위 구성 요소는 양식이며 목표는 입력에서 텍스트를 가져 오는 것이고 사용자가 제출 버튼을 클릭하면 입력 텍스트가 텍스트와 함께 경고를 표시하는 상위 구성 요소의 기능으로 전달됩니다.

이

은 부모 구성 요소입니다

const WeatherForm = require('WeatherForm'); 
const WeatherMessage = require('WeatherMessage'); 

class Weather extends Component { 
constructor(props) { 
    super(props); 
    this.state = { 
     location: '' 
    }; 
    this.handleSearch = this.handleSearch.bind(this); 
} 
render() { 
    return (
     <div> 
      <h3>Weather component</h3> 
      <WeatherForm onSearch={this.handleSearch} /> 
      <WeatherMessage /> 
     </div > 
    ); 
} 

handleSearch(value) { 
    alert(value); 
} 


} 

그리고이 하위 구성 요소입니다

class WeatherForm extends Component { 
constructor(props) { 
    super(props); 
    this.onFormSubmit = this.onFormSubmit.bind(this); 
} 
render() { 
    return (
     <div> 
      <form onSubmit={this.onFormSubmit}> 
       <input type="text" placeholder="Enter a city name" ref="location" onChange={this.onFormSubmit}/> 
       <button>Get weather</button> 
      </form> 
     </div> 
    ); 
} 
onFormSubmit(e) { 
    e.preventDefault(); 
    let location = this.refs.location; 

    if (location.value && location.value.length > 0) { 
     this.refs.location.value = ''; 
     props.onSearch(location.value); 
    } 

} 
} 

하지만 난이 제출 버튼을 클릭하면이 오류가 점점 오전 :

props.onSearch is not a function

을

어디서 실수합니까? 나는 또한 모든

Answer 1

이 <Route exact path="/" component={Weather} />

감사와 같은 다른 구성 요소의 경로에 날씨하여 상위 구성 요소 을 사용하고

당신은 당신의 함수 호출을 위해 이러한 맥락 누락되었습니다.

변화 props.onSearch 당신이 사람

onFormSubmit(e) { 
    e.preventDefault(); 
    const value = this.refs.location.value; 

    if (value && value.length > 0) { 
     this.refs.location.value = ''; 
     this.props.onSearch(value); 
    } 

}