Javascript 使用ReactJS从父对象中的子选择框获取数据

我有一个子组件和一个selectform元素，它查询我的API并生成一个数据选择框。然后，我尝试将通过OnChange函数选择的选项传递回父组件，以便将数据发送回服务器。我不断收到一个错误，说状态没有定义，我是新的反应，看不出哪里出了问题

这是我的父组件

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;

var ReactDom=require（'react-dom'）；
const uuid=require（'uuid/v1'）；
从“./actions/postData”导入{postDataTest}；
从“/TeamSelectBox”导入TeamSelectBox；
从“React”导入React，{Component，PropTypes}；
类PlayPerform扩展组件{
建造师（道具）{
超级（道具）；
此.state={
团队ID:“”
};
this.handleChange=this.handleChange.bind（this）；
}
字段值={
名称：空，
团队名称：空，
bio:null
}
handleChange（dataFromChild）{
console.log（dataFromChild）；
}
下一步（e）{
e、 预防默认值（）；
//通过this.refs获取值
变量播放器={
id:uuid（），
名称：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（播放器）；
}
render（）{
返回(
添加玩家
名称
队名
生物
保存并继续
)
}
}
module.exports=播放性能；

这是我的子窗体选择框

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;

import React，{Component}来自“React”；
从“axios”导入axios；
从“../actions/postData”导入{postDataTest}；
类TeamSelectBox扩展组件{
建造师（道具）{
超级（道具）；
此.state={
团队：[]
};
}
componentDidMount（）{
axios.get（“/api/teams”）
。然后（响应=>{
const teams=response.data；
这个.setState（{teams}）；
控制台日志（团队）；
});
}
render（）{
返回(
选拔队
{this.state.teams.map（singleTeam=>
{singleTeam.team.name}
)}
);
}
}
导出默认TeamSelectBox；
我想你有一个拼写错误，你错过了拼写道具，
这个.props
不是
这个.probs
我想你有一个拼写错误，你错过了拼写道具，
不是
这个。probs
你的方法看起来不错，但是你的子组件中有一个拼写错误：

{this.probs.onChange}

将其更改为
{this.props.onChange}
，然后重试
 您的方法似乎还可以，但您的子组件中有一个输入错误：

{this.probs.onChange}

将其更改为
{this.props.onChange}
，然后重试
 啊，不知道我怎么看不到，谢谢你，然后将teamId发送回去，我可以在我的播放器对象中设置它，比如teamId:this.state.teamId？啊，不知道我怎么看不到，谢谢你，然后将teamId发送回去，我可以在我的播放器对象中设置它，比如teamId:this.state.teamId？