连接2个react本机选取器

// 创建Redux store
import { createStore } from 'redux';
import { connect, Provider } from 'react-redux';

// 定义两个本机选取器的状态和动作
const picker1InitialState = {
  selectedValue: '',
};

const picker2InitialState = {
  selectedValue: '',
};

const picker1Reducer = (state = picker1InitialState, action) => {
  switch (action.type) {
    case 'SELECT_VALUE':
      return {
        ...state,
        selectedValue: action.payload,
      };
    default:
      return state;
  }
};

const picker2Reducer = (state = picker2InitialState, action) => {
  switch (action.type) {
    case 'SELECT_VALUE':
      return {
        ...state,
        selectedValue: action.payload,
      };
    default:
      return state;
  }
};

// 创建Redux store
const store = createStore(
  combineReducers({
    picker1: picker1Reducer,
    picker2: picker2Reducer,
  })
);

// 创建两个本机选取器组件
const Picker1 = ({ selectedValue, onSelect }) => (
  <select value={selectedValue} onChange={e => onSelect(e.target.value)}>
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
    <option value="option3">Option 3</option>
  </select>
);

const Picker2 = ({ selectedValue, onSelect }) => (
  <select value={selectedValue} onChange={e => onSelect(e.target.value)}>
    <option value="optionA">Option A</option>
    <option value="optionB">Option B</option>
    <option value="optionC">Option C</option>
  </select>
);

// 创建连接器组件
const ConnectedPicker1 = connect(
  state => ({
    selectedValue: state.picker1.selectedValue,
  }),
  dispatch => ({
    onSelect: value => dispatch({ type: 'SELECT_VALUE', payload: value }),
  })
)(Picker1);

const ConnectedPicker2 = connect(
  state => ({
    selectedValue: state.picker2.selectedValue,
  }),
  dispatch => ({
    onSelect: value => dispatch({ type: 'SELECT_VALUE', payload: value }),
  })
)(Picker2);

// 渲染应用程序
const App = () => (
  <Provider store={store}>
    <div>
      <ConnectedPicker1 />
      <ConnectedPicker2 />
    </div>
  </Provider>
);

ReactDOM.render(<App />, document.getElementById('root'));

// 安装mobx和mobx-react库
import { observable, action } from 'mobx';
import { observer } from 'mobx-react';

// 创建两个本机选取器的状态类
class Picker1State {
  @observable selectedValue = '';

  @action
  selectValue(value) {
    this.selectedValue = value;
  }
}

class Picker2State {
  @observable selectedValue = '';

  @action
  selectValue(value) {
    this.selectedValue = value;
  }
}

// 创建两个本机选取器组件
const Picker1 = observer(({ state }) => (
  <select value={state.selectedValue} onChange={e => state.selectValue(e.target.value)}>
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
    <option value="option3">Option 3</option>
  </select>
));

const Picker2 = observer(({ state }) => (
  <select value={state.selectedValue} onChange={e => state.selectValue(e.target.value)}>
    <option value="optionA">Option A</option>
    <option value="optionB">Option B</option>
    <option value="optionC">Option C</option>
  </select>
));

// 创建状态实例
const picker1State = new Picker1State();
const picker2State = new Picker2State();

// 渲染应用程序
ReactDOM.render(
  <div>
    <Picker1 state={picker1State} />
    <Picker2 state={picker2State} />
  </div>,
  document.getElementById('root')
);