>

자식의 구성 요소에서 입력을 얻으려고 시도하고 상태를 설정 한 다음 부모에게 전달하고 전달 데이터를 사용하여 상태를 설정하려고합니다. 다행히도 약간의 지연이 발생합니다. 1 ", 자녀 상태가 비어 있습니다. 그런 다음"2 "를 추가하면 자녀 상태는"12 "여야하지만 유일한"1 "입니다. 누군가 나를 도와 줄 수 있습니까?

class PropertyCard extends React.Component{
  constructor(props){
    super(props);
    this.state={
        label:'',
        name:'',
        type:'',  
    };
    this.ChangeLabel = this.ChangeLabel.bind(this);
  }
  ChangeLabel = (updatedName) => {
    console.log("updatedName: "+updatedName);
    this.setState({label: updatedName});
    console.log(this.state.label);
  }
  CreateJson = () => {
    console.log(JSON.stringify(this.state));
  }
  render(){
    return(
      <div>
          <WizardField 
          label={'label'}
          type={'text'}
          name={this.state.label} 
          onUpdate={this} 
          handleChange={this.ChangeLabel}
          />
          <button 
          style={{marginTop:"10px" }}
          className="ui primary button"
          variant="primary"
          onClick={this.CreateJson}
          >Done!</button>
      </div>
    );
  }
 }
class WizardField extends React. Component{
  constructor(props){
    super(props);
    this.state={
      name:this.props.name
    };
    this.handleChange=this.handleChange.bind(this);
};
  handleChange = (e) => {
    this.setState({ name: e.target.value });
    console.log("state in child: "+this.state.name);
    this.props.handleChange(this.state.name);
    }
  render(){
    return(
      <div>
        <label>
          {this.props.label}:
        </label>
        <input 
          type={this.props.type}
          value={this.state.name} 
          onChange={this.handleChange}
        />
      </div>
    );
  }
}


  • 답변 # 1

    소품을 통해 전달한 메소드를 호출하십시오

    function WizardField({label, name, handleChange, type="text") {
      return(
        <div>
          <label>
            {label}:
          </label>
          <input 
            type={type}
            value={name} 
            onChange={handleChange}
          />
        </div>
      );
    }
    
    

    handleChange 핸들러도 업데이트해야합니다.

    handleChange = (e) => {
      this.setState({ name: e.target.value });
    }
    
    

  • 답변 # 2

    자식에서 부모로 데이터를 전달하려면 콜백 함수가있는 이벤트를 사용하십시오. https://reactjs.org/docs/handling-events.html

관련 자료

  • 이전 database - Oracle SQLDeveloper 테이블 이름 자동 완성 설정
  • 다음 dax - 조건이 다른 행에서 두 셀을 빼는 PowerBi