Question

我正在尝试访问React组件中选定选项卡的索引，以便将其映射到props，如下所示：

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

您不应设置组件的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>
        )
    }
}

您可以在official docs上阅读更多内容。

Answer 2

如果我正确理解了该情况，则需要记录当前活动选项卡的index值。尝试使用onFocus事件处理程序获取当前可见选项卡的索引值，并设置handleSelect将使用的状态

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

处理程序定义

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

更新handleSelect

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>

ReactJS在类组件方法中将值赋给props

2 个答案: