J'ai un formulaire avec élément select. Les valeurs des options pour l'élément select proviennent d'une API. Je dois donc créer dynamiquement les options. Mais je ne peux pas obtenir l'élément select du DOM. Voici le code qui a essayé.Avez essayé d'accéder à l'élément select avec id, findDOMNode rien de tout cela n'obtient l'élément

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 à 09:32

1 réponse

Pourquoi avez-vous besoin d'accéder au nœud DOM alors que vous pouvez facilement travailler avec state in react.

Voici le code de travail avec lien 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 à 07:57