选择元素的findDOMNode()不起作用

我有一个带有select元素的表格。 select元素的选项值来自API。因此,我必须动态创建选项。但是我无法从DOM获取select元素。以下是已尝试的代码。尝试访问具有id的select元素,findDOMNode都没有获得该元素

apiVersion: extensions/v1beta1
kind: Ingress
metadata:
  annotations:
    certmanager.k8s.io/cluster-issuer: staging
    nginx.ingress.kubernetes.io/rewrite-target: /$1
    kubernetes.io/ingress.class: nginx
  name: staging-ingress
spec:
  rules:
  - host: test.example.io
    http:
      paths:
      - path: /(.*)
        backend:
          serviceName: service-1
          servicePort: 80
      - path: /preview/(.*)
        backend: 
          serviceName: service-2
          servicePort: 80
  tls:
  - hosts:
    - test.example.io
secretName: staging
spacerubbish 回答:选择元素的findDOMNode()不起作用

findDOMNode接受component作为参数,而不是引用。 尝试直接使用ref,因为它应该包含DOM节点。

请注意,findDOMNode是已弃用的API,应避免使用。

此外,正如阿敏·帕克斯(Amin Paks)所述,您应该考虑切换到使用createRef的裁判的当前样式

,

当您可以轻松地在react中使用状态时,为什么需要访问DOM节点。

下面是带有codesandbox link的工作代码:-

import React from "react";
import ReactDOM from "react-dom";

class App extends React.Component {
  state = {
    names: []
  };
  companyUserNames = () => {
    return new Promise(resolve => {
      return resolve([
        { userName: "ABC",fullName: "ABC XYZ" },{ userName: "DEF",fullName: "DEF QRW" }
      ]);
    });
  };
  componentDidMount() {
    this.companyUserNames()
      .then(result => {
        this.setState({
          names: result
        });
      })
      .catch(error => {
        console.log(error);
      });
  }
  render() {
    const { names } = this.state;
    let namesList =
      names.length > 0 &&
      names.map((item,i) => {
        return (
          <option key={i} value={item.userName}>
            {item.fullName}
          </option>
        );
      });
    return (
      <form>
        <div className="select">
          <select className="input common-input-style" maxLength="255">
            {namesList}
          </select>
        </div>
      </form>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />,rootElement);
本文链接:https://www.f2er.com/3168701.html

大家都在问