如何在react-selectize的MultiSelect中通过按钮手动添加选项？

在React中，组件通常是受控组件，和jQuery直接操作DOM的思路不同，我们需要通过状态（state）来管理MultiSelect的选中值，而不是直接调用DOM方法。下面是具体的实现步骤：

1. 初始化状态管理选中值 #

首先在组件的state中添加字段，分别存储原始邮箱列表和当前选中的邮箱（对应你代码中的sources）：

constructor(props) {
  super(props);
  this.state = {
    emails: [], // 你的原始邮箱数据源
    sources: [] // 存储MultiSelect的选中值
  };
}

2. 修改MultiSelect为受控组件 #

给MultiSelect添加value属性绑定状态，同时开启create选项（允许添加不在预设options中的新值）：

<MultiSelect
  placeholder="All Emails"
  value={this.state.sources} // 绑定选中值到state
  options={this.state.emails.map(source => ({ label: source, value: source }))}
  onValuesChange={value => this.onInputChange(value, "sources")}
  create={true} // 允许创建不在options列表中的新值
/>

3. 修正按钮的点击事件 #

你之前的按钮写法会在组件渲染时立即调用addEmailValue，而非点击触发，需要改成箭头函数传递参数，同时注意onClick的首字母是小写：

<button onClick={() => this.addEmailValue("email@gmail.com")}>添加邮箱</button>

4. 实现addEmailValue方法 #

通过更新state来添加新邮箱，同时避免重复添加：

addEmailValue = (email) => {
  this.setState(prevState => {
    // 检查邮箱是否已存在，防止重复添加
    if (!prevState.sources.includes(email)) {
      // 若希望新邮箱也出现在下拉选项中，可取消下面注释更新emails状态
      // const updatedEmails = [...prevState.emails, email];
      return {
        // emails: updatedEmails,
        sources: [...prevState.sources, email]
      };
    }
    // 邮箱已存在时，不修改state
    return prevState;
  });
}

补充：同步onValuesChange方法 #

确保onValuesChange能正确更新state，保持选中值和状态同步：

onInputChange = (value, key) => {
  this.setState({ [key]: value });
}

这样点击按钮时，新邮箱就会被添加到MultiSelect组件中，完全符合React的状态管理思路，替代了jQuery中直接操作DOM的方式。

内容的提问来源于stack exchange，提问作者Idant