Tengo un formulario con elemento select. Los valores de las opciones para seleccionar elemento proceden de una API. Así que tengo que crear dinámicamente las opciones. Pero no puedo obtener el elemento select de DOM. A continuación se muestra el código que se ha intentado. Han intentado acceder a select element con id, findDOMNode nada de esto está obteniendo el elemento

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/>
     )
}
0
Mojo 4 nov. 2019 a las 09:32

1 respuesta

¿Por qué necesita acceder al nodo DOM cuando puede trabajar fácilmente con el estado en reacción?

A continuación se muestra el código de trabajo con enlace de codesandbox : -

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);
1
tarzen chugh 4 nov. 2019 a las 07:57