将事件从父级传递给子级答案

【问题标题】：Passing Event from Parent to Child-Child将事件从父级传递给子级
【发布时间】：2019-10-09 19:32:37
【问题描述】：

我想知道如何做到这一点。在这个例子中，将事件从父级传递给子级/子级：我有 Apps.js，然后是 FormDynamic.js 和两个输入。我想将 Apps.js 中的 handleChange 传递给 FormDynamic.js，然后再传递给 InputTextField.js 并从 中获取值submitForm 函数上的 App.js。

//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;

【问题讨论】：

标签： reactjs react-component

【解决方案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

【讨论】：