时间戳

首页 > 解决方案 > 如何将输入数据传回类组件？

reactjs - 如何将输入数据传回类组件？

问题描述

如何将来自子组件中的两个输入选择的数据传递到作为类组件的父组件状态？

在这个问题上挠头。

父组件

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)));
        }} 
      />
    </>
  );
};

标签： reactjsreact-select

解决方案

您可以将回调从父级传递给子级。在 child 中，定义一些 props 以允许 parent 将回调传递给它，以便它可以侦听输入更改：

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

在父级中，您可以在输入值更改时开始收听并做任何您想做的事情：

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

推荐阅读