Question

我有一个带有select表单元素的子组件，这会查询我的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;

这是我的孩子表格选择框

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;

Answer 1

我认为你有拼写错误，你错过了法术道具，this.props而不是this.probs

Answer 2

你的方法似乎没问题，但是你的孩子组件中有一个拼写错误：

{this.probs.onChange}

将其更改为{this.props.onChange}然后重试！

使用ReactJS从父级的子选择框中获取数据

2 个答案: