Переключаться между div в React JSX

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

Answer 2

Если я понимаю, что вы хотите переключать отображение элементов div при нажатии на элементы span (почему бы не использовать якоря, они лучше подходят). Ниже приведен простой способ реализации этого,

(() =>
{
  const togglers = document.querySelectorAll('#toggle span');
  const togglees = document.querySelector('#toggle').parentNode.querySelectorAll('div');
  
  togglers.forEach((toggler, index) =>
  {
    toggler.addEventListener('click', () =>
    {
      togglees.forEach(togglee => togglee.style.display = 'none');
      togglees[index].style.display = 'block';
    }, true);
  });
})();

/* HIDE THOSE TOGGLEES BY DEFAULT CHANGE THIS!!!!!!!! */
div > div
{
  display: none;
}

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

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