Question

我是新手，想要编写一个简单的菜单功能。

当我点击选择A 时，标题内容应替换为选择A 并显示其列表。同样，当我点击选择B 时，选项A 应替换为选择B ，并列出其嵌套列表值。

现在我能够渲染html值，但不知道如何继续。需要帮助:(

class Search extends React.Component {
  constructor(props) {
    super(props)
    this.handleClick = this.handleClick.bind(this)
    this.state = {
      active: false
    }
  }

  handleClick() {
    alert("123");
  }

  render() {
    return (
      <div class="wrapper">
        <div className ="heading-conatiner">Heading container </div>
        <ul>
            <li onClick={this.handleClick} className="main-list">Choice A
              <ul className= "sub-list">
                <li>Sub 1--Choice A</li>
                <li>Sub 2---Choice A</li>
              </ul>
            </li>
            <li onClick={this.handleClick} className="main-list">Choice B
              <ul className= "sub-list">
                <li>Sub 1--Choice B</li>
                <li>Sub 2--Choice B</li>
              </ul>
            </li>
        </ul>
      </div>
    )
  }
}

React.render(<Search />, document.getElementById('root'))

Answer 1

我认为最好的方法是将菜单项存储在状态

this.state = {
  menu: 'Heading Content',
  menus: {
    a: ['Sub 1 - Choice A', 'Sub 2 - Choice A'],
    b: ['Sub 1 - Choice B', 'Sub 2 - Choice B']
  }
}

以某种方式表示项目上的点击与特定菜单相关联，具有data-属性或更多功能：

handleClick(menu) {
  return (event) => {
    const selectedMenu = this.state.menus[menu];
    this.setState({
      menu: (
       <ul>{
          menu.map((item) => {
            return <li>{item}</li>;
          })
       }</ul>
    });
  };
}

更新您的点击处理程序：

<li onClick={this.handleClick('a')} className="main-list">Choice A

然后让你的标题显示状态而不是字符串（这将要求你做一些innerHTML tomfoolery）：

<div className ="heading-conatiner">{this.state.menu}</div>

这是一个更新的codepen，肯定可以改进很多：http://codepen.io/anon/pen/MKZNVP

Answer 2

class Search extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      active: false,
      choice: 'A'
    }
  }

  handleClick(choice) {
    this.setState({choice: choice })
  }

  render() {
    var choices = this.props.choices[this.state.choice].map(function(e, i){
      return (<li key={i}>{e}</li>);
    });

    return (
      <div class="wrapper">

        <div className="heading-conatiner">
            <ul className="sub-list">
                {choices}
              </ul>
        </div>

        <ul>
            <li onClick={this.handleClick.bind(this,'A')} className="main-list">Choice A

            </li>
            <li onClick={this.handleClick.bind(this,'B')} className="main-list">Choice B

            </li>
        </ul>

      </div>
    )
  }
}
var choices = {
  A: ['choiceA1', 'choiceA2'],
  B: ['choiceB1', 'choiceB2']
}
React.render(<Search choices={choices}/>, document.getElementById('root'))

考虑将选项作为道具传递给组件。也许将当前选择或选择存储在州。请在此处查看http://codepen.io/anon/pen/yeGmqR

使用react html的简单原型

2 个答案: