1

我有一个带有选择元素的表单。选择元素的选项值来自 API。所以，我必须动态创建选项。但是，我无法从中获取选择元素DOM。

以下是尝试过的代码。我尝试使用 访问选择 ID 元素findDOMNode。这些都没有得到元素。

我需要做什么才能选择元素？

    componentDidMount() {
      companyUserNames()
        .then(result => {
          const companyUsername = result;
          console.log(result);
          //output  ==> [   { userName: "ABC",fullName: "ABC XYZ"}, {userName: 
          //      "DEF",fullName: "DEF QRW"}]


          companyUsername.forEach(role => {
            console.log(role);

            const roledynamic1 = document.getElementById("name1");
            console.log(roledynamic3);
            //output = null

            const roledynamic2 = this.refs.name1
            console.log(roledynamic3);
            //output = undefiend
            
            const roledynamic3 = ReactDOM.findDOMNode(this.refs.name1)
            console.log(roledynamic3);
            //output = null
         
            const newchild1 = document.createElement("option");
            newchild1.value = role.userName;
            newchild1.text = role.fullName;
            roledynamic3.add(newchild1);
          });
        })
        .catch(error => {
          console.log(error);
        });
    }

    render(){
        return(
         <form>
        //some input field

            <div className='select'>
              <select
                name='userName'
                id='name1'
                ref="name1"
                className='input common-input-style'
                maxLength='255'
                value={this.state.userName.value}
                onChange={this.handleInputChange}
               >
                  <option>Name</option>
               </select>
            </div>

        //some input field
        <form/>
         )
    }
4

2 回答 2

2

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

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

此外，正如 Amin Paks 提到的，您应该考虑切换到使用 refs 的当前样式createRef

于 2019-11-04T07:48:10.543 回答
1

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

以下是带有代码框链接的工作代码：-

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);
于 2019-11-04T07:57:03.103 回答