OnClick в неупорядоченном списке не работает? - PullRequest
Новая
       9

OnClick в неупорядоченном списке не работает?

0 голосов
/ 29 февраля 2020

Функция onclick, которая должна вызывать функцию HTML внутри Java -скрипта (JSX). Кажется, не работает ??

Работает ли onClick только для кнопки или для списков? 

class Top extends React.Component{
constructor(){
    super();
    this.searchjsx = this.searchjsx.bind(this);
}

searchjsx = () =>{
    return(
        <div id='searchdiv'>
            <form id='searchform'>
                <input type="text" id="input" name="search"></input>
            </form>
        </div>
    );
}
render(){
    return(
        <div>
        <div id="navbar">
            <ul id="nav">
                <li><a className="a" href='https://www.google.com/'>Home</a></li>
                <li><a  className="b" href='https://www.google.com/'>Profile</a></li>
                <li><a className="c" href='https://www.google.com/'>Pricing</a></li>
                <li onClick={this.searchjsx} id='sch'>Search..</li>
            </ul>
        </div>
        <div>

        </div>
        </div>
    );
}

}

Ответы [ 2 ]

0 голосов
/ 29 февраля 2020 
import React from "react";

export default class Top extends React.Component{
state = {
  show:false
}

showInput() {
  return(
    <div id='searchdiv'>
      <form id='searchform'>
        <input type="text" id="input" name="search"></input>
      </form>
    </div>
  );
}
handleShow() {
  this.setState({
    show: !this.state.show
  })
}
render(){
  return(
      <div>
      <div id="navbar">
          <ul id="nav">
              <li><a className="a" href='https://www.google.com/'>Home</a></li>
              <li><a  className="b" href='https://www.google.com/'>Profile</a></li>
              <li><a className="c" href='https://www.google.com/'>Pricing</a></li>
              <li onClick={e => this.handleShow(e)} id='sch'>Search..</li>
             {
               this.state.show ? this.showInput() : null
             } 
          </ul>
      </div>
      </div>
    );
  }
}
  • Вы должны поддерживать переменную состояния, которая может управлять моментом отображения компонента. В этом случае show .
0 голосов
/ 29 февраля 2020

У меня работает ниже: 

import React from "react";

export default class Top extends React.Component {
  state = {
    showForm: false
  };

  searchjsx = () => {
    console.log("Toggled showForm");
    this.setState({ showForm: !this.state.showForm });
  };

  render() {
    return (
      <div>
        <div id="navbar">
          <ul id="nav">
            <li>
              <a className="a" href="https://www.google.com/">
                Home
              </a>
            </li>
            <li>
              <a className="b" href="https://www.google.com/">
                Profile
              </a>
            </li>
            <li>
              <a className="c" href="https://www.google.com/">
                Pricing
              </a>
            </li>
            <li onClick={this.searchjsx} id="sch">
              Search..
            </li>
            {this.state.showForm ? (
              <div id="searchdiv">
                <form id="searchform">
                  <input type="text" id="input" name="search"></input>
                </form>
              </div>
            ) : (
              ""
            )}
          </ul>
        </div>
        <div></div>
      </div>
    );
  }
}

Примечания:

  1. onclick должен работать на любом элементе

  2. Вы пытались вставить форму внутри атрибута onClick. Вместо этого вы должны изменить состояние компонента при щелчке li, и в зависимости от состояния показать или скрыть форму

  3. В этом примере вам не нужен конструктор

...