Javascript 获取要更改为选定下拉列表值的下拉列表标题

我是一个新的反应者，并试图通过以下一些教程来了解这一点，但我在根据下拉列表中选择的值更改下拉列表标题时遇到了一些问题。我正在使用

react bootstrap

尝试这样做，但不确定如何更改标题

现在，当选择下拉列表时，我调用

onDropChange

函数，试图将状态设置为所选下拉列表的值，这样我就可以在标题中使用它，但我甚至无法使其工作

以下是我目前的代码：

import React, {PropTypes} from 'react';
import {connect} from 'react-redux';
import * as courseActions from '../../actions/courseActions';
import * as ReactBootstrap from 'react-bootstrap';

class CoursesPage extends React.Component {

    constructor (props, context) {
        super(props, context);

        this.state = {
            course: {title: ""},
            drplist: {drpval: ""}
        };

        this.onTitleChange = this.onTitleChange.bind(this);
        this.onClickSave = this.onClickSave.bind(this);
        this.onDropChange = this.onDropChange.bind(this);
    }

    onTitleChange (event) {
        //console.log("event: ", event)
        const course = this.state.course;
        //  console.log("course: ", course);
        course.title = event.target.value;
        this.setState({course: course});
    }

    onClickSave () {
        this.props.dispatch(courseActions.createCourse(this.state.course));
    }

    courseRow(course, index) {
        return <div key={index}>{course.title}</div>
    }

    onDropChange (eventKey) {
        console.log("drop change: ", eventKey);
        const drplist = this.state.drplist;
        drplist.drpval = eventKey;
        console.log('title2:', drplist.drpval);
    }

    render (title) {

        let data = [1,2,3,4]

        const makeList = function(x) {
            return <ReactBootstrap.MenuItem eventKey={x}>{x}</ReactBootstrap.MenuItem>
        }

        console.log("title:", title)

        return (
            <div>
                <h1>Courses</h1>
                {this.props.courses.map(this.courseRow)}
                <h2>Add Course</h2>
                <input
                    type="text"
                    onChange={this.onTitleChange}
                    value={this.state.course.title} />
                <input
                    type="submit"
                    value="save"
                    onClick={this.onClickSave} />
                <ReactBootstrap.DropdownButton title="test drop" id="bg-vertical-1" onSelect={this.onDropChange}>{data.map(makeList)}</ReactBootstrap.DropdownButton>
            </div>
        );
    }
}

function mapStateToProps(state, ownProps) {
    return {
      courses: state.courses  
    };
}

export default connect(mapStateToProps) (CoursesPage);

然后，我将渲染部分更改为：

        <ReactBootstrap.DropdownButton title={this.state.drplist.drpval} id="bg-vertical-1" onSelect={this.onDropChange}>{data.map(makeList)}</ReactBootstrap.DropdownButton>

{data.map（makeList）}

---

但是

title={this.state.drplist.drpval}

似乎没有反映更新的状态…

您需要正确设置/更新状态。

course

和

drplist

都是对象。因此，当这些对象发生更新时，您需要“让React知道”更新，以便它知道需要重新渲染某些内容。“hack”是在

console.log（'title2:'，drplist.drpval）之后调用
this.forceUpdate（）

但是，正确的做法是正确地更新状态。不要直接操作对象值，首先克隆要更新的状态对象，然后使用
this.setState
通知React更新。因此，将
onDropChange
函数更改为

console.log("drop change: ", eventKey);
//make a shallow-copy of the drplist object
let drplist = Object.assign({}, this.state.drplist);
drplist.drpval = eventKey;
console.log('title2:', drplist.drpval);
this.setState({drplist: drplist});

类似的错误出现在您的
onTitleChange
中。您需要正确设置/更新状态。
course
和
drplist
都是对象。因此，当这些对象发生更新时，您需要“让React知道”更新，以便它知道需要重新渲染某些内容。“hack”是在
console.log（'title2:'，drplist.drpval）之后调用
this.forceUpdate（）

但是，正确的做法是正确地更新状态。不要直接操作对象值，首先克隆要更新的状态对象，然后使用
this.setState
通知React更新。因此，将
onDropChange
函数更改为

console.log("drop change: ", eventKey);
//make a shallow-copy of the drplist object
let drplist = Object.assign({}, this.state.drplist);
drplist.drpval = eventKey;
console.log('title2:', drplist.drpval);
this.setState({drplist: drplist});

类似的错误出现在你的
onTitleChange
中，你正在改变你的状态。我强烈建议你读一下

确保在babel配置中启用了。否则，您可以使用。
您正在改变您的状态。我强烈建议你读一下

确保在babel配置中启用了。否则，您可以使用。
尝试
this.onDropChange（）
这似乎不起作用…当我这样做时，它甚至没有启动
onDropChange
函数…尝试
this.onDropChange（）
这似乎不起作用…当我这样做时，它甚至没有启动
onDropChange
函数。。。
onTitleChange (event) {
    const course = this.state.course;
    this.setState({
        course: {
            ...this.course,
            title: event.target.value
        }
    });
}