reactjs - 在 Reactjs 组件中使用条件

Question

在我的代码研究示例中，每个按钮必须在单击时显示不同的文本，具体取决于父组件中写入的条件。

 handlerButtons=()=> {
    switch(this.props.id) {
        case "id1": this.setState({text: "Text 1"}); break;
        case "id2": this.setState({text: "Text 2"}); break;
        case "id3": this.setState({text: "Text 3"}); break;
        case "id4": this.setState({text: "Text 4"}); break;
        case "id5": this.setState({text: "Text 5"}); break;
        default: this.setState({text: "Text default"}); break;
    }
}

为什么单击任何按钮只显示默认文本？条件有什么问题？

标签： reactjs

Answer 1

你实际上错过onClick了最重要的地方——它自己的按钮。您还在检查this.props.idid 不在您的道具中的值。进行以下更改：

class MyButton extends React.Component { 
    onClickHandle = (e) => { this.props.onClick(e) }
    render() {          
        return <button id={this.props.id} className="mybutton" onClick= {this.onClickHandle}>{this.props.label}</button>;    
    }
}

将 ButtonList 更改为：

class ButtonsList extends React.Component { 

    render() {

        return(
        <ul>
            {buttons.map((button)=> <MyButton id={button.id} label={button.label} onClick={this.props.handlerButtons}/>)}           
        </ul>
        );  
      }
    }

最后，更改您的处理程序：

handlerButtons=(e)=> {
    switch(e.target.id) {
        case "id1": this.setState({text: "Text 1"}); break;
        case "id2": this.setState({text: "Text 2"}); break;
        case "id3": this.setState({text: "Text 3"}); break;
        case "id4": this.setState({text: "Text 4"}); break;
        case "id5": this.setState({text: "Text 5"}); break;
        default: this.setState({text: "Text default"}); break;
    }
}