반응 핸들 상태 업데이트

Question

나는 반응 양식을 사용하여 입력 양식을 작성하고 있습니다. 모든 어린이 입력 값과 값을 저장하는 자체 상태가 있지만 부모 처리 방법에 대해서는 잘 모릅니다.

class FormComponent extends Component { 

    constructor(props) { 
     super(props); 

     this.state = { 
      title: null, 
      someAmount: null 
     } 
    } 

    render() { 
     let me = this; 

     return (
      <div> 
       <TextField 
        value={me.state.title} 
        onChange={(proxy, value) => { 
          me.setState({title: value}) 
          me.hanleChnage(); 
         } 
        } 
       /> 
       <TextField 
        value={Number.parseFloat(me.state.someAmount)} 
        onChange={(proxy, value) => { 
          if (!isNaN(Number.parseFloat(value))) { 
           me.setState({someAmount: value}) 
           me.hanleChnage(); 
          } 
         } 
        } 
       /> 
      </div>  
      )  
    } 

    handleChange() { 
     //Calling the parent 
     //State here is outdated 
     this.props.onUpdate && this.props.onUpdate(this.state); 
    } 
} 

export default FormComponent; 

또는 어디 반응에 많은 입력을 비교 예 양식의 사용의 몇 가지 예를 찾을 수 있습니다 다음은 예입니다. 감사합니다.

Answer 1

일부 상태를 상위 구성 요소로 옮기는 것을 고려해야하는 것처럼 들립니다. React docs에는 this에 관한 좋은 기사가 있습니다.

요약하면 부모에 함수를 선언하면 hanleChnage(); 함수를 하위 구성 요소의 소품으로 전달할 수 있습니다.

function handleChange() { //do something... } 
... 
<ChildComponent parentOnChange={this.handleChange.bind(this) /> 

구성 요소가 복잡 해지면 상태 관리에 Redux를 사용하여 응용 프로그램의 모든 상태에 대한 단일 소스로 사용할 수 있습니다.

Answer 2

부모 구성 요소 (예 : parentFunction)의 함수를 참조하도록 하위 속성 (예 : callParentProperty)을 설정합니다.

class ParentComponent extends Component{ 
    parentFunction(parameter) { 
     console.log("This is the form value"); 
     console.log(parameter); 
    } 
    render() { 
     return <FormComponent callParentFunctionProperty={this.parentFunction.bind(this)} /> 
    } 
} 
class FormComponent extends Component { 
    ... 
    handleChange() { 
     ... 
     let formValue = this.state.someAmount; 
     this.props.callParentFunctionProperty(formValue); 
    } 
}