javascript - 在 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>
        )
    }
}