Передача события от родителя ребенку

Question

Я хотел бы знать, как этого добиться. Передача события от Parent к Child / Child, в следующем примере: у меня есть Apps.js , затем FormDynamic.js и два входа. Я хочу передать handleChange из Apps.js в FormDynamic.js , а затем в InputTextField.js и получить значение из App.js в функции submitForm .

//Apps.js

import React, {Component} from 'react';

import FormDynamic from './components/FormDynamic'

class App extends Component {
  constructor(props)
  {
    super(props);
    this.state={
      fields: [
        {id:"101", name:"101", placeholder:"Enter Value 1",input_type:"text",required:true},
        {id:"102", name:"102", placeholder:"Enter Value 2",input_type:"number",required:true}
        ]

      }
      this._handleChange = this._handleChange.bind(this);
  }


  _handleChange = event =>{
    this.setState({
        [event.currentTarget.id]: event.currentTarget.value
    });
};

submitForm = event =>{
  const {fields, ...inputFields} = this.state;
  console.log(fields);
  console.log(inputFields);
  event.preventDefault();
};

  render(){
     return (
    <div className="App">
     <FormDynamic fields={this.state.fields} handleChange={this._handleChange} />
     <button onClick={this.submitForm}>Enviar Datos</button>
    </div>
  );
  }
}

export default App;

//FormDynamic.js
import React, {Component} from 'react';
import InputTextField from './InputTextField'
import InputNumberField from './InputNumberField'

class FormDynamic extends Component
{
constructor(props)
{
    super(props);    
}
    render()
    {
        return(
            <div>
                {this.props.fields.map(form => {
                    if (form.input_type ==="text")
                    {
                        return (
                            <InputTextField 
                             id={form.id}
                             name={form.name}
                             placeholder={form.placeholder}
                             required={form.required}
                             key={form.id}
                             onChange = {this.props.handleChange}
                            />
                        );
                    }
                    if (form.input_type ==="number")
                    {
                        return (
                            <InputNumberField 
                             id={form.id}
                             name={form.name}
                             placeholder={form.placeholder}
                             required={form.required}
                             key={form.id}
                             onChange = {this.props.handleChange}
                            />
                        );
                    }

                    return null;
                })}
            </div>
        )
    };

} 


export default FormDynamic;

//InputTextField.js
import React from 'react';

const InputTextField = ({id,name,placeholder,required,_handleChange}) =>
(
<div>
    <input type="text" 
     id={id}
     name={name}
     required={required}
     placeholder={placeholder}
     onChange={_handleChange}
    />
</div>
);

export default InputTextField;

Answer 1

От FormDynamic.js ваших пропусков onChange до InputTextField.js, но вы читаете неправильные реквизиты _handleChange вместо того, чтобы читать onChange пропусков, попробуйте приведенный ниже код, он будет работать.

//InputTextField.js
import React from 'react'

const InputTextField = ({id, name, placeholder, required, onChange}) => (
  <div>
    <input type="text" 
      id={id}
      name={name}
      required={required}
      placeholder={placeholder}
      onChange={onChange}
    />
  </div>
)

export default InputTextField