在反应中将 state 从子组件传递到父组件

Question

I have a parent and child component, i want to pass the state(share) from the child component to the parent one in the props(isChecked), how can this be done?

export class Form extends React.Component<FormProps, {
    ...,
    isChecked?: boolean}> {
constructor(props: FormProps) {
    super(props);

    this.state = {
      ...,
      isChecked:false
    };
 private checkField = () => {
           const checked = this.state.isChecked
           console.log('check '+checked)
    }
 render() {

}
return <div><Input name="Name" required={true} isChecked={this.state.isChecked}></div>
}

export function Input(props: React.PropsWithChildren<{name: string, required?: boolean, isChecked?:boolean}>) {
 
  const [share, setShare] = useState(false);
 
  return <Fragment>
    <div>
      {props.name}
      <span onClick={(event) => {setShare(!share);props.isChecked = share;}}>Selection {props.required ? '(Required)': ''}</span>
    </div>
<div className="btn btn--dark btn--margin-left" onClick= 
     {this.checkField}> Verify</div>
  </Fragment>;
}

Answer 1

For Child to Parent Interaction, you should pass a function as prop to the child from parent..

export class Form extends React.Component<FormProps, {
        ...,
        isChecked?: boolean}> {
    constructor(props: FormProps) {
        super(props);
    
        this.state = {
          ...,
          isChecked:false
        };
     render() {
    
       return <div>
               <Input 
                 name="Name" 
                 required={true} 
                 isChecked={this.state.isChecked}
                 handleChecked={
                 (isChecked: boolean) => this.setState({isChecked})
                 }
                />
             </div>
    }
    

    export function Input(props: React.PropsWithChildren<{name: string, required?: boolean, isChecked?:boolean, handleChecked?: (isChecked: boolean) => void}>) {
     
      const [share, setShare] = useState(false);
     
      return <Fragment>
        <div>
          {props.name}
          <span onClick={
              (event) => {
                  setShare(!share);
                  if(handleChecked) {props.handleChecked(share);}
          }}>Selection {props.required ? '(Required)': ''}</span>
        </div>
      </Fragment>;
    }

Answer 2

I guess you want to use share in your parent component and if that's the case you must set the state in the parent and pass it to your child as a prop just as you did with isChecked .

Answer 3

Very easy to do you just need to pass a handleChange prop to your child component from the parent component and then utilize it in the child component.

Checkout this code-sandbox