react.jsの選択値を変更

Question

私はあなたの助けが必要です！

私はcompagnyのプロジェクトに参加しています。私はReactと複製することができる選択フィールドを作成する必要があります。だから、もし私がページをリフレッシュすると、デフォルトのオプションは同じで、選択されたものではなく、選択を保存したいときに少し問題があります。 select.jsのための私のコードがあります：

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; 

私はデフォルト値に変更：

When i change the select option

After a refresh

を私は "select.jsにそれが値を初期化するので、それはだと思います'選択を保存しませんが、選択を保存する方法がわかりません。ここで

Answer 1

は、これを達成するための方法です：

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; 

あなたはそうのようにこれを実装するためのrenderメソッドでループを反復処理でき、さらに

を行く：

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> 
    ); 
    }