javascript - 根据特定元素设置状态

Question

我有3个链接，我想在单击元素时更改链接的文本，但这会影响那里的所有链接，当我单击链接时，所有链接都会更改为后退 ，但我希望它只是改变的链接，请问我该怎么做

 class Apps extends Component {
constructor(props) {
    super(props);
    // Don't do this!
    this.state = { showing: true, word: false };

}
render() {
    return (
        <div>
         <div className="container">
            <div style={{ display: (this.state.showing ? 'block' : 'none') }}>A Single Page web application
             made with react</div>
         </div>
            <div className="buttons">
                <a href='' ref="login" onClick={this.onclick.bind(this)} >{this.state.word ? 'back' : 'Login'}</a><br/><a href='' onClick={this.onclick.bind(this)}>{this.state.word ? 'back' : 'Signup'}</a><br />
                <a href='' onClick={this.onclick.bind(this)}>{this.state.word ? 'back' : 'Members'}</a>
            </div>

        </div>
    );

}onclick(e){
    e.preventDefault();
    this.setState({showing: !this.state.showing});
    this.setState({word: !this.state.word});
}
};

Answer 1

您可以将链接重构为具有自己状态的单独组件。