Ändern Sie den Wert in react.js

Question

Ich brauche Ihre Hilfe!

Ich bin auf einem Projekt für meine compagny und ich sollte ein Auswahlfeld erstellen, das mit React dupliziert werden kann. Also, ich habe ein kleines Problem, wenn ich meine Auswahl speichern möchte, wenn ich die Seite aktualisieren, die Standardoption immer noch die selbe (und nicht die ausgewählte). Es ist mein Code für select.js:

When i change the select option

After a refresh

Ich denke, es liegt daran, in select.js es den Wert initialisieren ':

import React, { Component, PropTypes } from 'react'; 

class Select extends React.Component { 

    constructor(props) { 
    super(props); 
    this.state = {value: ''}; 

    this.handleChange = this.handleChange.bind(this); 
    } 

    handleChange(data) { 
    this.setState({value:data.value}); 
    } 

    render() { 
    return (
     <label> 
      <select className="widefat" name={this.props.name} onChange={this.handleChange}> 
      <option value="grapefruit">Grapefruit</option> 
      <option value="lime">Lime</option> 
      <option value="coconut">Coconut</option> 
      <option value="mango">Mango</option> 
      </select> 
     </label> 
    ); 
    } 
} 

export default Select; 

ich den Standardwert ändern 'und speichere die Auswahl nicht, aber ich weiß nicht, wie ich die Auswahl speichern soll.

Answer 1

Hier ist ein Weg, dies zu erreichen:

import React, { Component, PropTypes } from 'react'; 

class Select extends React.Component { 

    constructor(props) { 
    super(props); 
    this.state = { value: props.value }; // can be initialized by <Select value='someValue' /> 
    } 

    handleChange(event) { 
    this.setState({value: event.target.value}); 
    } 

    render() { 
    return (
     <label> 
      <select className="widefat" value={this.state.value} name={this.props.name} onChange={this.handleChange.bind(this)}> 
      <option value="grapefruit">Grapefruit</option> 
      <option value="lime">Lime</option> 
      <option value="coconut">Coconut</option> 
      <option value="mango">Mango</option> 
      </select> 
     </label> 
    ); 
    } 
} 

export default Select; 

geht weiter

Sie in der Render-Methode eine Schleife durchlaufen könnte über diese umzusetzen etwa so:

render() { 
    const dictionary = [ 
     { value: 'grapefruit', label: 'Grapefruit' }, 
     { value: 'lime', label: 'Lime' }, 
     { value: 'coconut', label: 'Coconut' }, 
     { value: 'mango', label: 'Mango' } 
    ]; 
    const options = []; 

    dictionary.forEach(entry => options.push(
     <option value="grapefruit">{entry.label}</option> 
    )); 

    return (
     <label> 
      <select className="widefat" value={this.state.value} name={this.props.name} onChange={this.handleChange}> 
      {options} 
      </select> 
     </label> 
    ); 
    }