React：将道具传递给功能组件

Question

I have a seemingly trivial question about props and function components. Basically, I have a container component which renders a Modal component upon state change which is triggered by user click on a button. The modal is a stateless function component that houses some input fields which need to connect to functions living inside the container component.

My question: How can I use the functions living inside the parent component to change state while the user is interacting with form fields inside the stateless Modal component? Am I passing down props incorrectly? Thanks in advance.

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

Function (Modal) Component

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

Example: say I want to call this.firstNameChange from within the Modal component. I guess the "destructuring" syntax of passing props to a function component has got me a bit confused. ie:

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

Answer 1

You would need to pass down each prop individually for each function that you needed to call

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

and then in the CreateProfile component you can either do

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

with destructuring it will assign the matching property names/values to the passed in variables. The names just have to match with the properties

or just do

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

and in each place call props.onHide or whatever prop you are trying to access.

Answer 2

I'm using react function component
In parent component first pass the props like below shown

import React, { useState } from 'react';
import './App.css';
import Todo from './components/Todo'



function App() {
    const [todos, setTodos] = useState([
        {
          id: 1,
          title: 'This is first list'
        },
        {
          id: 2,
          title: 'This is second list'
        },
        {
          id: 3,
          title: 'This is third list'
        },
    ]);

return (
        <div className="App">
            <h1></h1>
            <Todo todos={todos}/> //This is how i'm passing props in parent component
        </div>
    );
}

export default App;

Then use the props in child component like below shown

function Todo(props) {
    return (
        <div>
            {props.todos.map(todo => { // using props in child component and looping
                return (
                    <h1>{todo.title}</h1>
                )
            })}
        </div>  
    );
}

Answer 3

An addition to the above answer.

If React complains about any of your passed props being undefined , then you will need to destructure those props with default values (common if passing functions, arrays or object literals) eg

const CreateProfile = ({
  // defined as a default function
  onFirstNameChange = f => f,
  onHide,
  // set default as `false` since it's the passed value
  show = false
}) => {...}

Answer 4

just do this on source component

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

then do this on destination component

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

Answer 5

A variation of finalfreq's answer

You can pass some props individually and all parent props if you really want (not recommended, but sometimes convenient)

<CreateProfile
  {...this.props}
  show={this.state.showModal}
/>

and then in the CreateProfile component you can just do

const CreateProfile = (props) => { 

and destruct props individually

const {onFirstNameChange, onHide, show }=props;