onodered列表上的onClick无法正常工作？

Question

ononclick函数应调用Javascript（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>
    );
}

}

Answer 1

以下内容对我有用：

import React from "react";

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

  searchjsx = () => {
    console.log("Toggled showForm form");
    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. 在此示例中，您似乎不需要构造函数

Answer 2

尝试将data-id属性添加到<li />项目。

<li onClick={this.searchjsx} data-id="1" id='sch'>Search..</li>