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的了解有限，这些事情很难实现。

显示与加载时相应键关联的所有值。那不是我想要的行为。我只想在下拉列表中控制记录所选项目。
其次我想将当前显示为Select Target的标题更改为下拉列表中的所选项目。

Answer 1

更改为：

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

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

要更改标题，您不应该像使用DOM那样使用DOM。在React中，您可以修改状态或道具以重新呈现组件。下面的完整代码使用.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>
    );
  }

}

处理React Bootstrap中的下拉项目选择

1 个答案: