无序列表上的 onClick 不起作用？答案

【问题标题】：The onClick on the unodered list is not working?无序列表上的 onClick 不起作用？
【发布时间】：2020-06-13 04:43:18
【问题描述】：

onclick 函数应该调用 Java 脚本 (JSX) 中的 HTML 函数。好像不行？？

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

}

【问题讨论】：

您是否尝试将alert 或console.log 放入searchjsx() 以测试点击是否有效？
您的处理程序可以工作，只是从普通事件处理程序返回 JSX 并没有做任何事情
是的，我试过控制台记录它工作。但 jsx 部分不起作用
@CertainPerformance，我该怎么办。
这个 onClick 函数对任何元素都不起作用；尝试在其他元素上使用。行不通。

标签： javascript reactjs list jsx bind

【解决方案1】：

以下对我有用：

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

注意事项：

onclick 应该适用于任何元素
您试图在 onClick 属性中插入表单。相反，您应该在单击 li 并根据状态显示或隐藏表单时更改组件的状态
在这个例子中你似乎不需要构造函数

【讨论】：

showForm 最初为 false，因为我们希望仅在单击“搜索..”li 时才显示表单。 state = { showForm: false}; 当用户点击 li 时，必须用 ! 切换 showForm 的值。操作员。 this.setState({ showForm: !this.state.showForm }); 最后，只有使用三元运算符 ?: 当 showForm 为真时，才必须在 li 下方显示表单b>

【解决方案2】：

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

您必须维护一个可以控制何时显示组件的状态变量。在这种情况下，显示。

【讨论】：