在ReactJs中将选定选项从一个select添加到另一个select

<select id="availableOptions">
  {/* 可选项 */}
</select>

<select id="selectedOptions">
  {/* 已选项 */}
</select>

constructor(props) {
  super(props);
  this.state = {
    availableOptions: [], // 可选项
    selectedOptions: [] // 已选项
  };
}

componentDidMount() {
  // 从API或其他数据源获取可选项数据
  const availableOptionsData = ["Option 1", "Option 2", "Option 3"];
  this.setState({ availableOptions: availableOptionsData });
}

handleAddOption = () => {
  const availableOptions = [...this.state.availableOptions];
  const selectedOptions = [...this.state.selectedOptions];
  const selectedOption = document.getElementById("availableOptions").value;

  // 从可选项中移除选定的选项
  const updatedAvailableOptions = availableOptions.filter(option => option !== selectedOption);

  // 将选定的选项添加到已选项中
  selectedOptions.push(selectedOption);

  // 更新state
  this.setState({
    availableOptions: updatedAvailableOptions,
    selectedOptions: selectedOptions
  });
}

render() {
  const { availableOptions, selectedOptions } = this.state;

  return (
    <div>
      <select id="availableOptions">
        {availableOptions.map(option => (
          <option key={option}>{option}</option>
        ))}
      </select>

      <button onClick={this.handleAddOption}>Add</button>

      <select id="selectedOptions">
        {selectedOptions.map(option => (
          <option key={option}>{option}</option>
        ))}
      </select>
    </div>
  );
}