Question

我已经编写了将父母的功能传递给孩子的代码。当函数执行子级时，父级元素将使用传递的参数（从子级传递）登录到控制台。

但是我得到一个错误，handlesubmit不是一个函数。

下面是父组件

const Parent=()=>{
 const handlesubmit=(value)=>{console.log(value)}
return (
<Child handlesubmit={handlesubmit} />
)
}

下面是孩子

const Child=(handlesubmit)=>{
return(
<Button  onPress={()=>handlesubmit('hi')} />
)
}

Answer 1

道具将作为参数传递给孩子：孩子的第一个参数是包含所有道具的对象：

const Child = ({ handlesubmit }) => {
  return (
    <Button onPress={() => handlesubmit('hi')} />
  );
};

或者您可以

const Child = (props) => {
  return (
    <Button onPress={()=> props.handlesubmit('hi')} />
  );
};

（在编写代码时最好使用适当的缩进-这样一目了然，您可以识别所有{ }块，从而使每个人和< / em>减少潜在的错误）

此外，您的Button是另一个组件，还是您要渲染<button>？如果为<button>，则需要使用大写字母，并使用onClick，而不要使用onPress（不存在）：

const Child = ({ handlesubmit }) => { return ( <button onClick={() => handlesubmit('hi')} /> ); };

Answer 2

尝试：

const Child = ({ handlesubmit }) => {
  return(
    <Button onClick={()=>handlesubmit('hi')} />
  )
}

Answer 3

您需要分解Child道具，onPress不是使用onClick或onSubmit的事件侦听器之一。

尝试查看以下代码：

const Child = (props) => {
  const { handlesubmit } = props;
  return <Button onClick={handlesubmit('hi')} />;
};

反应本机，将带有参数的函数从子级传递到父级

3 个答案: