React中如何将子组件两个输入选择器的数据回传给父类组件状态

核心逻辑是父组件提前定义好更新state的回调方法，通过props传递给子组件，子组件在选择器值变化时触发回调，将最新值回传给父组件更新state。 #

1. 修改父组件代码 #

你需要把原来打印日志的回调替换为更新state的方法，注意类组件要处理好this指向，推荐直接用类属性箭头函数定义回调：

export default class ProfileEditor extends React.Component<IProfileEditorProps, IProfileEditorState> {
  constructor(props: IProfileEditorProps) {
    super(props);
    this.state = {
      isLoading: true,
      currentUser: null,
      select1: null, // 存储第一个选择器的选中值
      select2: null  // 存储第二个选择器的选中值
    }
  }
  // 定义更新第一个选择器值的回调
  handleSelect1Change = (val) => {
    this.setState({
      select1: val
    })
  }
  // 定义更新第二个选择器值的回调
  handleSelect2Change = (val) => {
    this.setState({
      select2: val
    })
  }
  render() {
    // ...其他渲染逻辑
    return (
      {/* 其他组件 */}
      <MultiSelect
        options={countries}
        onSelect1Change={this.handleSelect1Change}
        onSelect2Change={this.handleSelect2Change}
      />
    )
  }
}

2. 修改子组件代码 #

你之前的子组件只在选择器变化时处理了选项过滤逻辑，需要补充触发父组件回调的逻辑，把选中值回传：

export const MultiSelect = ({options, onSelect1Change, onSelect2Change}) => {
  const [options1, setOption1] = React.useState(options);
  const [options2, setOption2] = React.useState(options);
  
  return (
    <>
      <Select
        isMulti
        options={options1}
        closeMenuOnSelect={false}
        onChange={(v1) => {
          // 先触发父组件回调传值
          onSelect1Change?.(v1)
          // 再处理选项过滤
          setOption2(options.filter((o2) => !v1.includes(o2)));
        }}
      />
      <div style={{ height: 30 }} />
      <Select
        isMulti
        options={options2}
        closeMenuOnSelect={false}
        onChange={(v2) => {
          // 先触发父组件回调传值
          onSelect2Change?.(v2)
          // 再处理选项过滤
          setOption1(options.filter((o1) => !v2.includes(o1)));
        }} 
      />
    </>
  );
};

补充说明 #

• 如果你需要获取的是选择器输入框的搜索输入值，而非选中的选项值，只需要把回调绑定到Select组件的onInputChange属性上即可，逻辑和上面完全一致
• 类组件的回调函数如果不用箭头函数定义，需要在constructor中手动绑定this：this.handleSelect1Change = this.handleSelect1Change.bind(this)

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