ReactJS Назначение значения внутри метода компонента класса для реквизита

Question

Я пытаюсь получить доступ к индексу выбранной вкладки в компоненте React, чтобы сопоставить его с реквизитами следующим образом:

class AttendanceDetail extends React.Component {

handleSelect(key, props) {

    console.log(key)

    props.index = key;

}


render(){

    const {single_class, courses, attendances} = this.props;

    // console.log(this.state);
    if(single_class) {
        return(
        <div className='container content-section'>

            // Some irrelevant Code  

            <Tabs defaultActiveKey={0} onSelect={this.handleSelect} id="uncontrolled-tab-example">

            { courses.map((course, index) => {


                return (
                <Tab eventKey={index} title={course.course  + " year " + course.yearofstudy}>

                 //Other irrelevant code...

                </Tab>
                )
            })}   
            </Tabs>

        </div>
        )
    } else {

    return (
        <div className='container content-section'>
        Loading Unit details... 
        </div>
    );

    }

}

}

Так что в основном метод handleSelect определяет индексвыбранной вкладки и записывает ее в консоль.Проблема в том, что я пытаюсь сопоставить этот ключ (индекс) с реквизитом, чтобы получить к нему доступ где угодно, но безрезультатно.Может ли кто-нибудь помочь мне?Чего мне не хватает?

Answer 1

Если я правильно понял сценарий, вам нужно зарегистрировать index значение активной в данный момент вкладки. попробуйте использовать обработчик событий onFocus, чтобы получить значение индекса видимой в данный момент вкладки и установить состояние, которое будет использоваться handleSelect

constructor(props){
super(props);
  this.state = {
    index:''
  }
}

определение обработчика

setIndex = (index) => {
  this.setState({index})
}

обновить дескрипторВыбрать

handleSelect(index) {
    console.log(index)
    // call event handler of parent component eg: this.props.getIndex(index);
}

обработчик компонента обновления вкладок

<Tabs defaultActiveKey={0} onSelect={() => {this.handleSelect(this.state.index)}} id="uncontrolled-tab-example">

обработчик вызовов в фокусе вкладки

<Tab 
onFocus={() => {this.setIndex(index)}} 
eventKey={index} 
title={course.course  + " year " + course.yearofstudy}>

//Other irrelevant code...
</Tab>

Answer 2

Вы не должны устанавливать props компонента, только для чтения.Вы можете использовать state внутри компонента:

export class Wrapper extends React.Component {
    constructor() {
        this.state = {
            index: 0 //initial state
        }
    }
    handleSelect(index, props) {
        this.setState({index})
    }
    render() {
        return (
           <span>{this.state.index}</span>
        )
    }
}

, вы можете прочитать больше на официальных документах .