尝试根据用户选择显示元素答案

【问题标题】：Trying to show element based on user selection尝试根据用户选择显示元素
【发布时间】：2022-01-26 05:25:33
【问题描述】：

这里我的 div 包含两个选项 ["Book" , "prices"] 。我的目标是当用户选择 Book 选项时，它会显示这本书的元素，价格也一样。

这是我的代码：

const BooksandPrices = props => {
    const option =["Book" , "Prices"]
    return (
        <div>
                    {option.map((option) => (
                        <div
                            className='bp'
                            onClick={(e) => {
                                {option == 'Book' && <PriceTable  />}
                                {option == 'Prices' && <BookTable  />}
                            }}
                        >
                            {option}
                            </div>
                    ))}
        </div>
    )
}

return (

<BooksandPrices />

)

【问题讨论】：

标签： reactjs onclick selection show-hide

【解决方案1】：

如果我的假设是正确的并且是每个相应选项的元素，那么您需要将它们移到 option.map 之外并初始化一个状态变量以控制显示哪个元素

const BooksandPrices = props => {
    const [selectedOption, setSelectedOption] = useState();
    const option =["Book" , "Prices"]
    return (
        <div>
                    {option.map((option) => (
                        <div
                          className='bp'
                          onClick={() => setSelectedOption(option)}
                        >
                            {option}
                            </div>
                    ))}
                    {selectedOption == 'Book' && <PriceTable  />}
                    {selectedOption == 'Prices' && <BookTable  />}
        </div>
    )
}

return (

<BooksandPrices />

)

【讨论】：

Tysm 成功了！！1

【解决方案2】：

React Hooks 可以解决这个问题，你只需要添加 useState 钩子。还请记住，您应该在遍历数组时添加 key 属性。

const BooksandPrices = props => {
        const option =["Book" , "Prices"];
        const [checkedOption, setCheckedOption] = useState("Book");
        return (
            <div>
                        {option.map((option, idx) => (
                            <div
                                className='bp'
                                onClick={()=>setCheckedOption(option)}
                                key={idx}
                            >
                            {option}
                           
                     
                                   
      
                                </div>
                        ))}
                         <div>
                            {checkedOption === 'Book' ? <BookTable  />:<PriceTable /> }
                            </div>
            </div>
        )
    }

【讨论】：