Question

我正在玩React并正在玩创建生成的下拉列表。我有整个下拉列表工作，现在想要在下拉列表中选择的任何项目上更新活动类。

我认为我的代码可以正常运行，但似乎没有将所选项目更新为活动状态，它似乎总是使第一个项目处于活动状态。

我的代码如下：

var Dropdown = React.createClass({
  // Set the dropdowns initial "default" state
  // settings
  getInitialState: function() {
    return {
      listOpen: false,
      selectedValue: 0
    };
  },

  // The dropdown has been clicked, set its state
  // to open so the dropdown shows. Create an event
  // listener to hide it when clicking elsewhere
  show: function () {
    this.setState({ listOpen: true });
    document.addEventListener("click", this.hide);
  },

  // Hide the dropdown when clicking outside
  // of it. Remove the event listener so it can
  // be clicked again.
  hide: function () {
    this.setState({ listOpen: false });
    document.removeEventListener("click", this.hide);
  },

  // Update the hidden text field and the
  // selected option text
  update: function (item) {
    this.props.selected = item;
    this.state.selectedValue = item.value;
  },

  // Render function to display the initial
  // HTML
  render: function () {
    return (
      <div>
        <div className="select-box" onClick={this.show}>
          <Field inputValue={this.state.selectedValue} />
          {this.props.selected.name}
          <ul className = {"select-dropdown" + (this.state.listOpen ? " show" : "")}>
            {this.renderListItems(this.props.selected.value)}
          </ul>
        </div>
      </div>
    );
  },

  // Render the list of items as taken
  // from the dropdownContents array
  renderListItems: function (selectedValue) {
    var items = [];
    for (var i = 0; i < this.props.list.length; i++) {
      var item = this.props.list[i];
      items.push(<li onClick={this.update.bind(null,item)} className = {selectedValue = item.value ? "" : "active"} >{item.name}</li>);
    }
    return items;
  }
});

// Rendering a hidden input field that will
// update with the new selected value from the
// dropdown.
var Field = React.createClass({
  render: function() {
    return <input className="select-input" value={this.props.inputValue} />;
  }
});

var Select = React.createClass({
  render: function() {
    return <select className="select-select">{this.renderListItems()}</select>;
  },

  // Render the list of items as taken
  // from the dropdownContents array
  renderListItems: function () {
    var items = [];
    for (var i = 0; i < this.props.values.length; i++) {
      var item = this.props.values[i];
      items.push(<option value={item.value}>{item.name}</option>);
    }
    return items;
  }
});

// Dropdown values. Always include select
// as the first value, with 0
var dropdownContents = [
  {
    value: 0,
    name: 'Select'
  },
  {
    value: 1,
    name: 'Item One'
  },
  {
    value: 2,
    name: 'Item Two'
  }];

// Render the dropdown on the page, inside the
// container div
React.render(<Dropdown list={dropdownContents} selected={dropdownContents[0]} />, document.getElementById("container"));

我在这里设置了一个JS小提琴：http://jsfiddle.net/mcty44cf/

Answer 1

找到答案：

我错过了一个= Doh！

应该是

items.push(<li onClick={this.update.bind(null,item)} className = {selectedValue == item.value ? "active" : ""} >{item.name}</li>);

单击更新列表项类

1 个答案: