web-dev-qa-db-fra.com

Réagit en sélectionnant l'option avec l'objet comme valeur d'attribut

J'ai un problème avec Réagir lorsque je veux changer l'option sélectionnée .. Le problème est que la valeur est un objet et je ne peux pas la transmettre dans l'option attribut.

Voir le code suivant:

class Selector extends React.Component {
  contructor(props) {
    super(props)
    this.state = { obj: null }
    this.handleChange = this.handleChange.bind(this)
  }

  handleChange(e) {
    this.setState({obj: e.target.value})
  }

  render() {
    <select onChange={handleChange}>
     {this.props.listOption.map((option, index) => 
       <option key={index} value={option.obj}>
         {option.name}
       </option>
     )}
    </select>
  }
}

et avec

<Selector option={[{name: "name", obj:{...}}, ...]}>

Je dois modifier l'état du composant avec la valeur de l'option sélectionnée ..___ Ce que j'obtiens lorsque le changement d'état est "object Object". Je suppose que cela se produit parce que react ne peut pas incorporer un objet javascript dans l'attribution de la vue finale. J'ai raison?

De plus, j’ai mis obj dans état comme nul dans le constructeurEst-ce qu’une bonne façon de le faire?

javascripthtmlreactjs
6
Frilox

Vous pouvez utiliser index de options

class Selector extends React.Component {
  contructor(props) {
    super(props);
    this.state = { obj: null }
    this.handleChange = this.handleChange.bind(this)
  }

  handleChange(e) {
    this.setState({obj: this.props.listOption[e.target.value].obj})
  }

  render() {
    <select onChange={handleChange}>
     {this.props.listOption.map((option, index) =>
       <option key={index} value={index}>
        {option.name}
       </option>
      )}
    </select>
  }
}

De plus, je mets obj in state à null dans le constructeur Is at-il un bonne façon de le faire?

Je dépend de vos besoins. Si vous souhaitez afficher au moins une option sélectionnée, vous pouvez la conserver au lieu de null

13
Jyothi Babu Araja

Transmettez la chaîne JSON de l'objet en tant que valeur, puis analysez-la.

handleChange(e) {
    let obj = JSON.parse(event.target.value); //object
  }

  render() {
    <select onChange={handleChange}>
     {this.props.listOption.map((option, index) => 
       <option key={index} 
         value={JSON.stringify(option)}> //pass object string as value
         {option.name}
       </option>
     )}
    </select>
  }
5
Sreeragh A R

Je suppose que vous voulez qu’une seule option soit sélectionnée . Le moyen le plus simple consiste donc à définir selectedIndex . Lorsque vous utilisez construct, pensez toujours au type de valeur . This.state = {selectedIndex: 0}

Maintenant, vous avez l’état avec l’objet selectedIndex qui est d’abord égal à 0.

Dans la méthode de rendu, vous pouvez simplement vérifier l'index:

{this.props.listOption.map((option, index) => {
    this.state.selectedIndex == index ? (
      <option key={index} value={option.obj} selected>option.name</option>
    ): (
      <option key={index} value={option.obj}>option.name</option>
    ))}

Et sur le changement de poignée setState avec e.target.key. 

J'ai peut-être laissé des erreurs de syntaxe ... J'espère que cela aidera.

2
Luke359