Drop-down-Titel zum ausgewählten Drop-Down-Wert wechseln

Question

Ich bin neu zu reagieren und versuche, dies aufzuheben, indem ich ein paar Tutorials befolge, aber ich habe Probleme, den Dropdown-Listentitel basierend auf dem Wert zu ändern Dropdown-Liste. Ich verwende react bootstrap, um dies zu versuchen, bin mir aber nicht sicher, wie ich den Titel ändern kann.

Gerade jetzt, wenn überhaupt das Dropdown ausgewählt ist, rufe ich onDropChange Funktion an und ich versuche, den Status auf den Wert des Drop-Downs, die so ausgewählt wurde, dann kann ich es im Titel verwenden, aber ich kann Mach das nicht mal zur Arbeit.

Hier ist mein Code so weit:

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); 

------- ------- EDIT

Ich glaube, ich bin etwas, wo immer:

ich machte den Anfangszustand wie folgt aussehen:

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

ich dann den Teil dazu machen geändert:

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

aber title={this.state.drplist.drpval} scheint nicht den aktualisierten Zustand zu reflektieren ...

Answer 1

Sie müssen den richtigen Zustand setzen/aktualisieren. Sowohl course als auch drplist sind Objekte. Wenn also ein Update für diese Objekte durchgeführt wird, müssen Sie "React know" über das Update wissen, damit es weiß, dass es etwas neu rendern muss. Ein "Hack" wäre this.forceUpdate() nach console.log('title2:', drplist.drpval); zu nennen.

Die richtige Sache wäre jedoch, den Zustand korrekt zu aktualisieren. Anstatt die Objektwerte direkt zu bearbeiten, klonen Sie zuerst das Statusobjekt, das Sie aktualisieren möchten, und verwenden Sie dann this.setState, um React über das Update zu informieren. Ändern Sie also Ihre onDropChange Funktion zu.

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}); 

Ein ähnlicher Fehler ist in Ihrem onTitleChange

Answer 2

Sie Ihren Zustand mutiert. Ich empfehle Ihnen dringend, über immutability in React zu lesen.

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

Sicherstellen, dass die object spread operator plugin in Ihrer babel-Konfiguration aktiviert ist. Andernfalls können Sie Object.assign verwenden.