按钮事件在反应中不起作用，传递转发参考

Question

我正在使用 react 和 react-bootstrap 以及 react-select。

我有一个问题，当我点击按钮时，控制台上没有显示，也没有执行任何操作。

Input.js 功能组件是 Hero.js 功能组件的子组件。

所以hero.js是父组件，Input.js是子组件。

而我的按钮在父组件中(Hero.js)。

所以我在我的按钮处理程序上使用父到子组件的转发引用。

我在 Input.js 中使用 react-select 输入，我想在单击按钮时聚焦。

单击按钮时控制台也不显示。

这里是Hero.js（父组件）

import React, { useState} from "react";
import "../App.css";
import Input from "./Input";
import Btnfill from "./Btnfill";

function Hero() {
  const [Infocus, setInfocus] = useState();


  const focusInput = () => {
       console.log(Infocus.current);
       Infocus.focus();
  }

  return (
    <>
              <Input
                icon={Search}
                cname={{ iconavailable: "input", noIcon: "input-notIcon" }}
                placeholder="Search Industries"
                ref={setInfocus}
              />
              <Btnfill text="Search" size="larger" onClick={focusInput} />
    </>
  );
}
export default Hero;

这里是Input.js

import React, { useState, useEffect} from "react";
import Select from "react-select";

const Input =  React.forwardRef((props, refrence) =>  {

// Input select options
  const options = [
    { value: "chocolate", label: "Chocolate" },
    { value: "strawberry", label: "Strawberry" },
    { value: "vanilla", label: "Vanilla" },
  ];

  return (
    <div>
<Select
        defaultValue={selectedOption}
        onChange={onChangeEvent}
        options={options}
        className={props.icon ? props.cname.iconavailable : props.cname.noIcon}
        placeholder={props.placeholder}
        ref={refrence}
      />
</div>
  );
})

export default Input;

Answer 1

您想使用 ref，但您在 Hero.js 中实际做的是 - 您正在定义状态并向下传递 set-state 函数。

您需要做的是：

在 Hero.jsx 中定义新引用：const inputRef = useRef();
在您的按钮点击处理程序中设置焦点。为此，您需要访问 ref 的当前属性：const focusInput = () => inputRef.current.focus();
改为传递 ref：<Input ... ref={inputRef} />

https://codesandbox.io/s/nervous-lewin-8510tf

按钮事件在反应中不起作用，传递转发参考

Button Event not worlking in react, passing forwaring ref

reactjs

react-hooks

react-bootstrap

react-select