在 React JSX 中的 div 之间切换

Question

所以我有两个输入框，我希望能够通过单击在它们之间切换（隐藏）。他们在他们下方填充了一张桌子。我知道这并不难，但似乎无法轻松实现。

这一切都发生在一个组件中。像这样的东西：

<p id="toggle">
  <span> Employer </span>
  <span> Location </span>
</p>

<div id="left">..input box 1</div>
<div id="right">..input box 2</div>

我需要实现它的功能是什么？谢谢！

Answer 1

你的问题确实不是很难。这是一个带有函数组件的解决方案：

const MyComponent = (props) => {
    const [selected, setSelected] = useState(0)

    return (
        <div>
            <p id="toggle">
                <span onClick={() => setSelected(0)}> Employer </span>
                <span onClick={() => setSelected(1)}> Location </span>     
            </p>

            {(selected === 0) && <div id="left"> ..input box 1</div>}
            {(selected === 1) && <div id="right"> ..input box 2</div>}
        </div>
    )
}

这是一个带有类组件的解决方案：

class MyComponent extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            selected: 0
        }
    }

    render() {
        return (
            <div>
                <p id="toggle">
                    <span onClick={() => this.setState({ selected: 0 })}> Employer </span>
                    <span onClick={() => this.setState({ selected: 1 })}> Location </span>     
                </p>

                {(selected === 0) && <div id="left"> ..input box 1</div>}
                {(selected === 1) && <div id="right"> ..input box 2</div>}
            </div>
        )
    }
}