하위 구성 요소의 부모 상태 업데이트

Question

양식을 작성하려고합니다. 양식의 끝에서 위치를 선택할 수 있습니다. 나는 이것을 places-autocomplete으로 사용하고 있습니다. Locationpicker는 Form-View 구성 요소의 하위 항목입니다. 좌표의 상태는 handleSelect()에서 위치를 선택할 때 설정되지만 부모의 양식 데이터에 추가하려는 경우에는 액세스 할 수 없습니다.

하위 구성 요소 이제

class LocationPicker extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     address: "San Francisco, CA", 
     lat: "", 
     lng: "" 
    }; 
    this.handleSelect = this.handleSelect.bind(this); 
    this.handleChange = this.handleChange.bind(this); 
    } 
    handleSelect(address) { 
    this.setState({ 
     address 
    }); 
    geocodeByAddress(this.state.address) 
     .then(results => getLatLng(results[0])) 
     .then(latLng => this.setState({ lat: latLng.lat, lng: latLng.lng })) 
     .catch(error => console.error("Error", error)); 
    } 

    handleChange(address) { 
    this.setState({ 
     address, 
     geocodeResults: null 
    }); 
    } 

    render() { 
    const inputProps = { 
     value: this.state.address, 
     type: "text", 
     onChange: this.handleChange, 
    }; 

    return (
     <div> 
     <PlacesAutocomplete 
      onSelect={this.handleSelect} 
      onEnterKeyDown={this.handleSelect} 
      inputProps={inputProps} 
     /> 
     <p>{this.state.lat}</p> 
     <p>{this.state.lng}</p> 
     </div> 
    ); 
    } 
} 

내 부모 구성 요소에서 위도와 LNG를 사용하고 싶습니다,하지만 난 내 부모에게 handleSelect 기능을 추가 할 수 없습니다. 부모 컴포넌트에 lat 및 lng를 보내려면 어떻게해야합니까?

당신은 부모 상태 address를 업데이트하는 아이에게 부모에서 함수를 전달할 수

Answer 1

:

class LocationPicker extends React.Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
      address: props.address || "San Francisco, CA", 
      lat: "", 
      lng: "" 
     }; 
     this.handleSelect = this.handleSelect.bind(this); 
     this.handleChange = this.handleChange.bind(this); 
    } 
    handleSelect(address) { 
     this.props.updateAddress(address); 
     geocodeByAddress(address) 
      .then(results => getLatLng(results[0])) 
      .then(latLng => this.setState({ lat: latLng.lat, lng: latLng.lng })) 
      .catch(error => console.error("Error", error)); 
    } 

    handleChange(address) { 
     this.props.updateAddress(address); 
     this.setState({ 
      geocodeResults: null 
     }); 
    } 

    componentWillReceiveProps(prevProps, nextProps) { 
     if(prevProps.address !== nextProps.address){ 
      this.setState({ 
       address: nextProps.address 
      }); 
     } 
    } 

    render() { 
     const inputProps = { 
      value: this.state.address, 
      type: "text", 
      onChange: this.handleChange, 
     }; 

     return (
      <div> 
       <PlacesAutocomplete 
        onSelect={this.handleSelect} 
        onEnterKeyDown={this.handleSelect} 
        inputProps={inputProps} 
       /> 
       <p>{this.state.lat}</p> 
       <p>{this.state.lng}</p> 
      </div> 
     ); 
    } 
} 

export default class Parent extends Component { 
    state = { 
     address: '' 
    }; 
    updateAddress = address => { 
     this.setState({ 
      address 
     }); 
    } 
    render() { 
     return (
      <div> 
       <LocationPicker address={address} /> 
      </div> 
     ) 
    } 
} 

또는, 부모 (컨테이너) 구성 요소에 주소 상태의 모든 이동하고 아래로 통과 할 수 소품과 하위 구성 요소에 대한 모든 :

class LocationPicker extends React.Component { 
    render() { 
     const inputProps = { 
      value: this.props.address, 
      type: "text", 
      onChange: this.props.handleChange, 
     }; 
     return (
      <div> 
       <PlacesAutocomplete 
        onSelect={this.handleSelect} 
        onEnterKeyDown={this.handleSelect} 
        inputProps={inputProps} 
       /> 
       <p>{this.props.lat}</p> 
       <p>{this.props.lng}</p> 
      </div> 
     ); 
    } 
} 

export default class Parent extends Component { 
    state = { 
     address: '', 
     geocodeResults: null, 
     lat: '', 
     lng: '' 
    } 
    handleSelect = address => { 
     this.setState({ 
      address 
     }); 
     geocodeByAddress(this.state.address) 
      .then(results => getLatLng(results[0])) 
      .then(latLng => this.setState({ lat: latLng.lat, lng: latLng.lng })) 
      .catch(error => console.error("Error", error)); 
    } 
    handleChange = address => { 
     this.setState({ 
      address, 
      geocodeResults: null 
     }); 
    } 
    render() { 
     return (
      <div> 
       <LocationPicker address={this.state.address} handleSelect={this.handleSelect}/> 
      </div> 
     ) 
    } 
}