如何从reactjs中的select tag(main)的onchange事件中更新另一个select tag(sub)？

constructor(props) {
  super(props);
  this.state = {
    mainSelectValue: '',
    subSelectValue: ''
  };
}

handleMainSelectChange(event) {
  const value = event.target.value;
  this.setState({
    mainSelectValue: value,
    subSelectValue: ''
  });

  // 根据选中值更新子select标签的选项列表和选中值
  // 可以根据具体需求进行相应的处理
  // ...

}

render() {
  const mainOptions = ['Option 1', 'Option 2', 'Option 3']; // 主select标签的选项列表
  const subOptions = ['Sub Option 1', 'Sub Option 2', 'Sub Option 3']; // 子select标签的选项列表

  return (
    <div>
      <select value={this.state.mainSelectValue} onChange={this.handleMainSelectChange}>
        {mainOptions.map(option => (
          <option key={option} value={option}>{option}</option>
        ))}
      </select>

      <select value={this.state.subSelectValue} onChange={this.handleSubSelectChange}>
        {subOptions.map(option => (
          <option key={option} value={option}>{option}</option>
        ))}
      </select>
    </div>
  );
}