Javascript 反应：将道具传递给功能组件

我有一个关于道具和功能组件的看似微不足道的问题。基本上，我有一个容器组件，它在用户点击按钮触发状态改变时呈现一个模态组件。模态是一个无状态的功能组件，其中包含一些需要连接到容器组件中的函数的输入字段

我的问题：当用户与无状态模式组件内的表单字段交互时，如何使用父组件内的函数来更改状态？我传递道具的方式有误吗？提前谢谢

容器

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

导出默认类LookupForm扩展组件{
建造师（道具）{
超级（道具）；
此.state={
showModal:错误
};
}
render（）{
让close=（）=>this.setState（{showmodel:false}）；
返回(
…//其他JSX语法
);
}
名字更改（e）{
行动。第一名变更（如目标值）；
}
};

功能（模式）组件

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

constcreateprofile=（{fields}）=>{
console.log（字段）；
返回(
…//其他JSX语法
名字
);
};

示例：假设我想从模态组件中调用this.firstNameChange。我想向功能组件传递道具的“解构”语法让我有点困惑。i、 e:

---

constsomecomponent=（{someProps}）=>{/…}
您需要为需要调用的每个函数分别传递每个道具

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

通过分解结构，它将为传入的变量分配匹配的属性名称/值。名称必须与属性匹配

还是就这么做

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

在每个地方调用props.onHide或任何您试图访问的道具。
以上答案的补充。

如果
React
抱怨您传递的
道具
未定义
，则您需要使用
默认值（传递函数、数组或对象文字时常见）来分解这些道具，例如

const CreateProfile=({
//定义为默认函数
onFirstNameChange=f=>f，
安希德，
//将默认值设置为'false'，因为它是传递的值
show=false
}) => {...}
我正在使用react函数组件

在父组件中，首先通过道具，如下图所示

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;

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


import React，{useState}来自“React”；
导入“/App.css”；
从“./components/Todo”导入Todo
函数App（）{
const[todos，setTodos]=useState([
{
id:1，
标题：“这是第一个列表”
},
{
id:2，
标题：“这是第二张名单”
},
{
id:3，
标题：“这是第三张名单”
},
]);
返回(
//这就是我在父组件中传递道具的方式
);
}
导出默认应用程序；

然后在子组件中使用道具，如下图所示

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;

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


功能待办事项（道具）{
返回(
{props.todos.map（todo=>{//在子组件和循环中使用props
返回(
{todo.title}
)
})}
);
}
只需在源组件上执行此操作

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

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

如果我想将数据从Todo传递到应用程序呢？是的，请回答不断获取道具。func未定义，即使我知道它正在传递。现在我知道为什么了！泰！这就是我喜欢的东西。有时需要太多的知识诀窍才能让它发挥作用。@friendlyfire您稍后会掌握诀窍的。记住，很多检查/控制都是为了确保安全。如何
导出默认值
这一点？最后写导出默认CreateProfile；