Question

我想知道如何做到这一点。通过此示例，将事件从Parent传递给Child / Child：我有 Apps.js ，然后是 FormDynamic.js 和两个输入。我想将handleChange从 Apps.js 传递给 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;

Answer 1

从public String getStatusPaciente() { if (status == null) { return null; } return status.getStatus(); }传递的道具FormDynamic.js到onChange，但是您读错的道具InputTextField.js而不是阅读_handleChange道具，请尝试使用下面的代码。

onChange

将事件从父母传递给孩子

1 个答案: