Javascript 如何从onClick侦听器返回表单？

我有一个带有onClick按钮的react应用程序。其中一个组件的简单版本如下所示：

export const Filters= props=>{
return(
          </div>
           <button 
           onClick={AddReview()}>
            Add review
          </button>
    </div>
    )
  }

export const Filters=props=>{
返回(
添加评论
)
}

带有事件hendler的组件如下所示：

export default function AddReview() {
        return (
         <div className="filter" style={{ margin: "300 px"}}>
              <h2>Board</h2>
              <Form>
             <FormGroup>
            <Label for="player">Player</Label>
            <Input name="player" placeholder="Ex: Player 1"></Input>
          </FormGroup>
          </Form>
        </div> 
        );
      }

导出默认函数AddReview（）{
返回(
董事会
玩家
);
}

因此，我的任务是从事件处理程序onClick返回表单，但我面临警告：

预期onClick listener是函数，但得到的是对象类型的值

---

我怎样才能避免这个问题？谢谢大家!

事件处理程序是一个不能返回任何内容的

void

函数。您希望向组件添加一个

状态

，该状态告诉您是否显示

AddReview

组件

const [isAddingReview, setIsAddingReview] = useState(false);

在事件处理程序中，更新此状态

onClick={() => setIsAddingReview(true)}

然后，仅当

isAddingReview

为

true

时，才有条件地呈现

AddReview

组件

这里我显示了一个“AddReview”

按钮，当它是
false
时，它是
AddReview
组件，当它是
true
时。可能有一些回调函数要作为道具传递给
AddReview
。例如，我们可以传递一个函数来关闭表单，您可以在提交表单时在
AddReview
内调用该函数

export const Filters = () => {
  const [isAddingReview, setIsAddingReview] = useState(false);

  return(
    <div>
      {isAddingReview
      ? // when true
      <AddReview
        close={() => setIsAddingReview(false)}
      />
      : // when false
      <button 
        onClick={() => setIsAddingReview(true)}
      >
         Add review
      </button>
      }
    </div>
  )
}

export const Filters=（）=>{
const[isAddingReview，setIsAddingReview]=useState（false）；
返回(
{isAddingReview
？//当为true时
setIsAddingReview（假）}
/>
：//当为false时
setIsAddingReview（真）}
>
添加评论
}
)
}
您正在调用
onClick
侦听器（
AddReview（）
）中的函数。这意味着该函数的返回值将放在大括号
{}
之间。从函数引用中删除括号
（）
。除此之外，每当调用
AddReview
时，您希望发生什么？它是一个组件，而不是您应该运行的函数。事件处理程序onClick返回的表单是什么意思？您的
过滤器
组件有一个调用
AddReview
的按钮，
AddReview
组件有一个带有class
filter
的div。。。这太令人困惑了…非常感谢你的帮助！