React: transmission des accessoires aux composants fonctionnels

Question

J'ai une question apparemment banale sur les accessoires et les composants fonctionnels. Fondamentalement, j'ai un composant conteneur qui rend un composant modal lors d'un changement d'état qui est déclenché par un clic de l'utilisateur sur un bouton. Le modal est un composant fonctionnel sans état qui abrite certains champs d'entrée qui doivent se connecter à des fonctions vivant à l'intérieur du composant conteneur.

Ma question: comment puis-je utiliser les fonctions vivant à l'intérieur du composant parent pour changer d'état pendant que l'utilisateur interagit avec les champs de formulaire à l'intérieur du composant modal sans état? Suis-je en train de transmettre des accessoires de façon incorrecte? Merci d'avance.

Conteneur

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);
    }
};

Composant fonctionnel (modal)

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>
  );
};

Exemple: disons que je veux appeler this.firstNameChange Depuis le composant Modal. Je suppose que la syntaxe de "déstructuration" du passage d'accessoires à un composant fonctionnel m'a un peu dérouté. c'est à dire:

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

Answer 1

il suffit de le faire sur le composant source

 <MyDocument selectedQuestionData = {this.state.selectedQuestionAnswer} />

puis faites-le sur le composant de destination

const MyDocument = (props) => (
  console.log(props.selectedQuestionData)
);