反应和渲染标签

Question

因此，我按 "renderTitles()" 呈现选项卡的标题。单击标题并将其设置为 "selected" 道具时，我需要获取选项卡的索引。 "handleClick()" 显示当前索引 - 没关系，但我不明白为什么 "selected" 的状态与。我哪里错了？

const tabTitle = ['Prices', 'Description', 'Analytics'];

class Tabs extends React.Component {
    
    constructor(props) {
        super(props);
            
        this.state = {
            selected: 0
        }
    }
    
    handleClick(index) {
        this.setState({ selected: index })
        console.log(this.state.selected)
        console.log(index)
    }
    
    renderTitles() {
        return tabTitle.map( (el, index) => {
            return (
                <li key={index}>
                    <a href="#"
                        onClick={this.handleClick.bind(this, index)}>
                        {el} 
                    </a>
                </li>
            );
        })
    }
    
    render() {
        return (
            <div>
                <ul>{this.renderTitles()}</ul>
            </div>
        );
    }
}

Tabs.propTypes = {
    selected: React.PropTypes.number
}

ReactDOM.render(
  <Tabs />,
  document.getElementById('root')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

Answer 1

this.setState is asynchronous。如果您想查看 selected 设置的内容，请在超时后执行此操作：

this.setState({ selected: index })
setTimeout(function () {
  console.log(this.state.selected);
}, 1000);

反应和渲染标签

React and render Tabs

frontend

reactjs