獲取下拉標題以更改爲選定的下拉列表

我是新來做出反應並試圖通過遵循一些教程來選擇這一點，但我有一些問題獲取下拉列表標題以基於在下拉列表。我正在使用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);

------- -------編輯

我覺得我得到了一些其中：

我所做的初始狀態是這樣的：

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

我再改渲染部分，這一點：

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

但title={this.state.drplist.drpval}似乎並沒有反映更新狀態...

來源

2017-03-13 user2061886

嘗試'this.onDropChange（）' – jmargolisvt

似乎沒有工作...當我這樣做，它甚至不啓動'onDropChange'函數... – user2061886

您需要正確地設置/更新狀態。 course和drplist都是對象。因此，當這些對象發生更新時，您需要「讓React知道」更新，以便知道它需要重新呈現某些內容。「破解」將在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

來源

2017-03-13 13:50:18 Kiran

你是變異的狀態。我強烈建議你閱讀關於immutability in React。

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

確保object spread operator plugin在您的通天配置中啓用。否則，您可以使用Object.assign。

來源

2017-03-13 13:51:29

獲取下拉標題以更改爲選定的下拉列表

回答

相關問題