ReactJSを使用して親の子セレクトボックスからデータを取得

私はselectフォーム要素を持つ子コンポーネントを持っています。これはAPIに照会してデータから選択ボックスを作成します。私は次に、OnChange関数を介して選択されたオプションを親コンポーネントに渡そうとしているので、データをサーバーに送り返すことができます。私は状態が定義されていないと言っているエラーを続けて、私は反応するために新しいです、そして、私が間違っているところを見ることができません。私はあなたがタイプミスがあると思う。ここReactJSを使用して親の子セレクトボックスからデータを取得

は私の親コンポーネントが

var ReactDom = require('react-dom'); 
const uuid = require('uuid/v1'); 
import {postDataTest} from "../actions/postData"; 
import TeamSelectBox from "./TeamSelectBox"; 
import React, {Component, PropTypes} from "react"; 

class PlayerForm extends Component { 

    constructor(props) { 
      super(props); 
      this.state = { 
       teamId: '' 
      }; 
      this.handleChange = this.handleChange.bind(this); 
     } 


    fieldValues = { 
     name: null, 
     teamName: null, 
     bio: null 
    } 

    handleChange(dataFromChild) { 
     console.log(dataFromChild); 
    } 

    nextStep(e) { 
     e.preventDefault(); 
     // Get values via this.refs 
     var player = { 
      id: uuid(), 
      name: ReactDom.findDOMNode(this.refs.name).value, 
      teamName: ReactDom.findDOMNode(this.refs.teamName).value, 
      bio: ReactDom.findDOMNode(this.refs.bio).value, 
      teamId: ReactDom.findDOMNode(this.refs.teamId).value 
     }; 

     postDataTest(player); 
    } 

    render() { 
     return (
     <div className="row"> 
      <div className="col-md-6"> 
       <div className="panel"> 
        <div className="panel-heading"> 
         <h1>Add Player</h1> 
        </div> 
        <div className="panel-body"> 
         <form className="form-horizontal"> 
          <div className="form-group"> 
           <label className="control-label">Name</label> 
           <input type="text" className="form-control" ref="name" defaultValue={this.fieldValues.name}/> 
          </div> 
          <div className="form-group"> 
           <label className="control-label">Team Name</label> 
           <input type="text" className="form-control" ref="teamName" defaultValue={this.fieldValues.teamName}/> 
          </div> 
          <TeamSelectBox state={this.state.teamId} onChange={this.handleChange}/> 
          <div className="form-group"> 
           <label className="control-label">Bio</label> 
           <input type="textarea" className="form-control" ref="bio" defaultValue={this.fieldValues.bio}/> 
          </div> 
          <div className="bs-component"> 
           <button className="btn btn-md btn-default btn-block" onClick={this.nextStep}>Save &amp; Continue</button> 
          </div> 
         </form> 
        </div> 
       </div> 
      </div> 
     </div> 
     ) 
    } 
} 

module.exports = PlayerForm;

されており、ここで私の子フォームの選択ボックスが

import React, {Component} from "react"; 
import axios from "axios"; 
import {postDataTest} from '../actions/postData'; 

class TeamSelectBox extends Component { 

    constructor(props) { 
     super(props); 
     this.state = { 
      teams: [] 
     }; 
    } 


    componentDidMount() { 
     axios.get("/api/teams") 
      .then(response => { 
       const teams = response.data; 
       this.setState({teams}); 
       console.log(teams); 
      }); 
    } 

    render() { 
     return (
      <div className="form-group"> 
       <label for="inputSelect" className="control-label">Select Team</label> 
       <div className="bs-component"> 
        <select value={this.probs.state.teamId} onChange={this.probs.onChange} className="form-control"> 
        <option value=""></option> 
        {this.state.teams.map(singleTeam => 
         <option value={singleTeam.id}>{singleTeam.team.name}</option> 
        )} 
        </select> 
       </div> 
      </div> 
     ); 
    } 

} 

export default TeamSelectBox;

出典

2017-02-06 Nick Pocock