javascript - 在 React Bootstrap 中处理下拉项选择

Question

我正在遍历一个 dict 并在 react-bootstrap 下拉菜单中显示键。这是我的 React 下拉组件，

class Dropdown extends React.Component
{
    constructor(props)
    {
        super(props);
        this.onTargetSelect = this.onTargetSelect.bind(this);
    }

    onTargetSelect(target)
    {
        console.log("Outputting from here: ", target);
        document.getElementById("dropdown-title").textContent(target);
        this.props.passTargetToParent(target);
    }

    render()
    {
        return(
        <SplitButton title="Select Target" id="dropdown-target">
            {Object.keys(dict).map(key => <MenuItem key={dict[key]} 
              href={`#${dict[key]}`} 
              onSelect={this.onTargetSelect(dict[key])}>{key}</MenuItem>)}
        </SplitButton>);
    }

}

我想在这里做两件事，但由于我对 Javascript 的了解有限，所以很难做到。

1. 这会显示与加载时的各个键关联的所有值。那不是我想要的行为。我只想控制台记录下拉列表中的选定项目。

2. 其次，我想将当前显示为 Select Target 的标题更改为下拉列表中的所选项目。

Answer 1

更改为:

onSelect={() => this.onTargetSelect(dict[key])}

...上面的内容是在渲染过程中立即执行 this.onTargetSelect() ，因此对列表中的每个项目执行一次。您需要为 onSelect 提供一个处理程序(函数)，并且该处理程序应该在其中调用 this.onTargetSelect() 。 “() =>”语法正在创建一个新函数。

要更改标题，您不应像现在这样使用 DOM。在 React 中，您修改状态或 Prop 以重新渲染您的组件。下面使用 .state/.setState() 的完整代码(未经测试，只是从您的代码中复制/粘贴并进行了调整):

class Dropdown extends React.Component {

  constructor(props) {
    super(props);
    this.onTargetSelect = this.onTargetSelect.bind(this);

    this.state = { title: 'Select Target' };
  }

  onTargetSelect(target) {
    this.setState({ title: target });

    this.props.passTargetToParent(target);
  }

  render() {
    return (
      <SplitButton title={this.state.title} id="dropdown-target">
        {Object.keys(dict).map(key => <MenuItem key={dict[key]} href={`#${dict[key]}`} onSelect={() => this.onTargetSelect(dict[key]) }>{key}</MenuItem>) }
      </SplitButton>
    );
  }

}