如何将输入数据传回 class 组件？

Question

如何将子组件中的两个输入选择的数据传递到父组件状态，即 class 组件？

这个让我摸不着头脑。

父组件

export default class ProfileEditor extends React.Component<IProfileEditorProps, IProfileEditorState> {

  constructor(props: IProfileEditorProps) {
    super(props);
    this.state = {
      isLoading: true,
      currentUser: null,
      select1: values to be set from child component
      select2: values to be set from child component
    }
        <MultiSelect
            options={countries}
            onInputChange1={input1 => console.log(input1)}
            onInputChange2={input2 => console.log(input2)}
          />

子组件：

export const MultiSelect = ({options, onInputChange1, onInputChange2}) => {

  console.log(options);

  const [options1, setOption1] = React.useState(options);
  const [options2, setOption2] = React.useState(options);
  
  return (
    <>
      <Select
        isMulti
        options={options1}
        closeMenuOnSelect={false}
        onInputChange={onInputChange1} 
        onChange={(v1) => {
          setOption2(options.filter((o2) => !v1.includes(o2)));
        }}
      />
      <div style={{ height: 30 }} />
      <Select
        isMulti
        options={options2}
        closeMenuOnSelect={false}
        onInputChange={onInputChange2}
        onChange={(v2) => {
          setOption1(options.filter((o1) => !v2.includes(o1)));
        }} 
      />
    </>
  );
};

Answer 1

您可以将回调从 parent 传递到 child。在 child 中，定义一些属性以允许 parent 将回调传递给，以便它可以监听输入变化：

export const MultiSelect = ({ onInputChange1, onInputChange2 }) => {
    return (
      <>
        <Select
          {...}
          onInputChange={onInputChange1}
        />
        <div style={{ height: 30 }} />
        <Select
          {...}
          onInputChange={onInputChange2}
        />
      </>
    );
  };

在parent中，当输入值改变时，你可以开始监听并为所欲为：

<MultiSelect onInputChange1={input1 => {...}} onInputChange2={input2 => {...}} />

如何将输入数据传回 class 组件？

How to pass input data back to class component?

reactjs

react-select