Question

我正在使用React.forwardRef在子组件上设置ref，如下所示：

const Input = React.forwardRef(
  ({ value, onChange, onKeyPress, placeholder, type, label, ref }) => (
    <div style={{ display: "flex", flexDirection: "column" }}>
      <input
        ref={ref}
        style={{
          borderRadius: `${scale.s1}rem`,
          border: `1px solid ${color.lightGrey}`,
          padding: `${scale.s3}rem`,
          marginBottom: `${scale.s3}rem`
        }}
        value={value}
        onChange={onChange}
        onKeyPress={onKeyPress}
        placeholder={placeholder ? placeholder : "Type something..."}
        type={type ? type : "text"}
      />
    </div>
  )
);

在父母中，我使用const ref = React.createRef()，然后称呼它：

 onClick = () => {
    this.setState({ showOther: true });
    console.log(this.ref, "ref");
    this.ref.focus();
  };

  render() {
    return (
      <div className="App">
        <button onClick={this.onClick}>Click me</button>
        <Input
          ref={ref}
          value={this.state.value}
          onChange={this.handleChange}
          onKeyPress={this.handleKeyPress}
          placeholder="Type something..."
        />
      </div>
    );
  }

我从控制台得到的是这样：

Object {current: null} current: null "ref"

我的问题：

为什么这个为空？
如何集中输入？

Codesandbox

Answer 1

根据您的沙箱，使用外部类Component的$ tree Projects/ Projects/ ├── Project_001 │ ├── Image_001.jpg │ └── jpg │ └── Image_000.jpg ├── Project_002 │ ├── Image_002.jpg │ ├── Image_003.jpg │ └── jpg │ ├── Image_000.jpg │ └── Image_001.jpg └── Project_003代替$ tree Projects/ Projects/ ├── Project_001 │ └── jpg │ ├── Image_000.jpg │ └── Image_001.jpg ├── Project_002 │ └── jpg │ ├── Image_000.jpg │ ├── Image_001.jpg │ ├── Image_002.jpg │ └── Image_003.jpg └── Project_003。只需从

进行更改

ref

进入此

this.ref

在<Input ref={ref} />函数中是这样的

<Input
  ref={this.ref}
/>

这是工作中的codesandbox，请尽情享受！

如何将输入集中在父级的子级组件上？

1 个答案: