Javascript 反应下拉选择-基于箭头按钮的增量或减量单击

我有一个下拉输入。单击输入旁边的向左或向右箭头按钮时，我希望向前或向后移动当前选定的选项。它还应该在单击下拉列表本身并选择某个选项时跟踪该选项

当使用e.target.value（和控制台日志）单击时，我能够捕获当前选定对象的值，当单击箭头按钮（和控制台日志）时，我能够增加或减少状态的计数，但我不确定将两者联系在一起的最佳方式（在“计数”处显示项目）数组中的位置索引？）

这是我的密码：

class DropdownMenu extends Component {
  state = {
    // Select options
    options: [
      { name: 'Item 1', label: 'Item 1' },
      { name: 'Item 2', label: 'Item 2' },
      { name: 'Item 3', label: 'Item 3' },
      { name: 'Item 4', label: 'Item 4' },
      { name: 'Item 5', label: 'Item 5' }
    ],
    value: 'select', // this should be the initial item ('Item 1')
    count: 0
  };

  change = e => {
    this.setState({ value: e.target.value }, console.log(this.state));
  };

  handleIncrement = () => {
    this.setState(
      {
        count: this.state.count + 1
      },
      () => {
        console.log(this.state);
      }
    );
  };

  handleDecrement = () => {
    this.setState(
      {
        count: this.state.count - 1
      },
      () => {
        console.log(this.state);
      }
    );
  };

  // Here I map over the options in state

  dropdown = () => (
    <div className="dropdown position-relative">
      <select onChange={this.change} value={this.state.value}>
        {this.state.options.map((option, index) => {
          return (
            <option key={index} name={option.name} value={option.name}>
              {option.label}
            </option>
          );
        })}
      </select>
      <div className="descend">
        <img className="icon" src={descendIcon} alt="" />
      </div>
    </div>
  );

  // I want to use these arrows to increment or decrement the selection on the drop down

  leftArrow = icon => (
    <button
      type="button"
      className="btn btn-2"
      onClick={this.handleIncrement}
    >
      <img className="icon" src={icon} alt="left arrow" />
    </button>
  );

  rightArrow = icon => (
    <button
      type="button"
      className="btn btn-2"
      onClick={this.handleDecrement}
    >
      <img className="icon" src={icon} alt="" />
    </button>
  );

  render() {
    return (
      <div className="flex flex-row">
        <div className="flex-grow">{this.dropdown()}</div>
        <div>
          {this.leftArrow(leftIcon)}
          {this.rightArrow(rightIcon)}
        </div>
      </div>
    );
  }
}

export default DropdownMenu;

类下拉菜单扩展组件{
状态={
//选择选项
选项：[
{name:'Item 1'，label:'Item 1'}，
{名称：'Item 2'，标签：'Item 2'}，
{名称：'Item 3'，标签：'Item 3'}，
{名称：'Item 4'，标签：'Item 4'}，
{名称：'Item 5'，标签：'Item 5'}
],
值：'选择'，//这应该是初始项（'项目1'）
计数：0
};
更改=e=>{
this.setState（{value:e.target.value}，console.log（this.state））；
};
handleIncrement=（）=>{
这是我的国家(
{
计数：this.state.count+1
},
() => {
console.log（this.state）；
}
);
};
handleDecrement=（）=>{
这是我的国家(
{
计数：this.state.count-1
},
() => {
console.log（this.state）；
}
);
};
//在这里，我映射状态中的选项
下拉菜单=（）=>(
{this.state.options.map（（选项，索引）=>{
返回(
{option.label}
);
})}
);
//我想使用这些箭头来增加或减少下拉列表上的选择
leftArrow=图标=>(
);
右箭头=图标=>(
);
render（）{
返回(
{this.dropdown（）}
{this.leftArrow（leftIcon）}
{this.rightArrow（rightIcon）}
);
}
}
导出默认下拉菜单；

不要在你的状态中同时存储

计数

和

值

，因为这样你就有了两个应该选择的真相来源。只需存储

count

，在任何可以获得

value

的地方，都可以获得

options[count]

。

查看

---

因为React可以批量设置状态调用以获得更好的性能，所以您不能完全依赖this.state.count将其用作更新状态的起点。相反，您需要调用setState passing prevState作为参数之一，并使用prevState.count+1

好的，我没有解释您的问题，所以您可以使用joseph描述的逻辑来完成。 使用选项[index]获取值，并始终更新索引

---

查看：

在本例中，

this.state.count

存储所选的

选项

索引。如果我们将

this.state.count

设置为

选择

菜单的

值

，则当状态更新时，选择将重新呈现并显示与更新计数匹配的选项

现场演示：

class下拉菜单扩展了React.Component{
状态={
//选择选项
选项：[
{name:'Item 1'，label:'Item 1'}，
{名称：'Item 2'，标签：'Item 2'}，
{名称：'Item 3'，标签：'Item 3'}，
{名称：'Item 4'，标签：'Item 4'}，
{名称：'Item 5'，标签：'Item 5'}
],
计数：0
};
更改=e=>{
this.setState（{count:Number（e.target.value）}）；
};
handleIncrement=（）=>{
const c=this.state.count；
const len=this.state.options.length-1；
让计数=（c+1>len）？c:c+1；
this.setState（{count}）；
};
handleDecrement=（）=>{
const c=this.state.count；
设计数=（c-1<0）？c:c-1；
this.setState（{count}）；
};
下拉菜单=（）=>(
{this.state.options.map（（选项，索引）=>(
{option.label}
))}
);
leftArrow=图标=>(
);
右箭头=图标=>(
);    
render（）{
返回(
{this.dropdown（）}
{this.leftArrow（'leftIcon'）}
{this.rightArrow（'rightIcon'）}
);
}
}

class DropdownMenu extends React.Component {
    state = {
        // Select options
        options: [
            { name: 'Item 1', label: 'Item 1' },
            { name: 'Item 2', label: 'Item 2' },
            { name: 'Item 3', label: 'Item 3' },
            { name: 'Item 4', label: 'Item 4' },
            { name: 'Item 5', label: 'Item 5' }
        ],
        count: 0
    };
    change = e => {
        this.setState({ count: Number(e.target.value) });
    };
    handleIncrement = () => {
        const c = this.state.count;
        const len = this.state.options.length - 1;
        let count = (c + 1 > len) ? c : c + 1;
        this.setState({ count });
    };
    handleDecrement = () => {
        const c = this.state.count;
        let count = (c - 1 < 0) ? c : c - 1;
        this.setState({ count });
    };
    dropdown = () => (
        <div className="dropdown position-relative">
            <select onChange={this.change} value={this.state.count}>
                {this.state.options.map((option, index) => (
                    <option key={index} name={option.name} value={index}>
                        {option.label}
                    </option>
                ))}
            </select>
            <div className="descend">
                <img className="icon" src="" alt="" />
            </div>
        </div>
    );
    leftArrow = icon => (
        <button
            type="button"
            className="btn btn-2"
            onClick={this.handleDecrement}
            >
            <img className="icon" src={icon} alt="left arrow" />
        </button>
    );
    rightArrow = icon => (
        <button
            type="button"
            className="btn btn-2"
            onClick={this.handleIncrement}
            >
            <img className="icon" src={icon} alt="right arrow" />
        </button>
    );    
    render() {
        return (
            <div className="flex flex-row">
                <div className="flex-grow">{this.dropdown()}</div>
                <div>
                    {this.leftArrow('leftIcon')}
                    {this.rightArrow('rightIcon')}
                </div>
            </div>
        );
    }
}