Question

我有一个带有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

Answer 1

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

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

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

Answer 2

当您可以轻松地在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);

选择元素的findDOMNode（）不起作用

2 个答案: