Reagieren: Requisiten an funktionale Komponenten übergeben

Question

Ich habe eine scheinbar triviale Frage zu Requisiten und Funktionskomponenten. Grundsätzlich habe ich eine Container-Komponente, die eine Modal-Komponente bei Zustandsänderung rendert, die durch einen Klick des Benutzers auf eine Schaltfläche ausgelöst wird. Das Modal ist eine zustandslose funktionale Komponente, die einige Eingabefelder enthält, die mit Funktionen verbunden sein müssen, die innerhalb der Containerkomponente leben.

Meine Frage: Wie kann ich die Funktionen innerhalb der übergeordneten Komponente verwenden, um den Status zu ändern, während der Benutzer mit Formularfeldern innerhalb der zustandslosen Modal-Komponente interagiert? Überführe ich Requisiten falsch? Danke im Voraus.

Container

export default class LookupForm extends Component { 
    constructor(props) { 
     super(props); 

     this.state = { 
      showModal: false 
     }; 
    } 
    render() { 
     let close =() => this.setState({ showModal: false }); 

     return (
      ... // other JSX syntax 
      <CreateProfile fields={this.props} show={this.state.showModal} onHide={close} /> 
     ); 
    } 

    firstNameChange(e) { 
     Actions.firstNameChange(e.target.value); 
    } 
}; 

Funktionelle (Modal) Komponente

const CreateProfile = ({ fields }) => { 
    console.log(fields); 
    return (
     ... // other JSX syntax 

     <Modal.Body> 
     <Panel> 
      <div className="entry-form"> 
      <FormGroup> 
       <ControlLabel>First Name</ControlLabel> 
       <FormControl type="text" 
       onChange={fields.firstNameChange} placeholder="Jane" 
       /> 
      </FormGroup> 
); 
}; 

Beispiel: sage ich this.firstNameChange aus der Modal-Komponente aufrufen möchten. Ich denke, dass die "Destrukturierungs" -Syntax der Übergabe von Requisiten an eine funktionale Komponente mich etwas verwirrt hat. dh:

const SomeComponent = ({ someProps }) = > { // ... };

Answer 1

Sie müssten jede Stütze einzeln für jede Funktion zu überliefern, die Sie

<CreateProfile 
    onFirstNameChange={this.firstNameChange} 
    onHide={close} 
    show={this.state.showModal} 
/> 

und dann in der Create-Komponente aufzurufen, benötigt können Sie entweder tun

const CreateProfile = ({onFirstNameChange, onHide, show }) => {...} 

mit Destrukturierung wird es die übereinstimmenden Eigenschaftsnamen/Werte den übergebenen Variablen zuweisen. Die Namen müssen nur mit den Eigenschaften übereinstimmen

oder tun nur

const CreateProfile = (props) => {...} 

und an jedem Ort Anruf props.onHide oder was auch immer prop Sie versuchen zu erreichen.