Question

我在 ReactJs 组件中有一个选择，其中包含一些选项，我希望将所选选项添加到另一个组件中的另一个选择中。示例：

const conponent1 = () => {
return <>
  <select>
    <option value="">Select a option</option>
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
    </select>
    <component2 />
  </>
} 

const component2 = () => {
return <>
  <select>
    <option value="">Select a option</option>\
    //It does not contain any options because one has not yet been chosen in the previous select.
    </select>
  </>
}

用户选择了选项2，所以这个选项必须添加到第二个组件的select中。

const conponent1 = () => {
return <>
  <select>
    <option value="">Select a option</option>
      <option value="1">Option 1</option>
      <option value="2">Option 2</option> // Chosen option.
      <option value="3">Option 3</option>
    </select>
    <component2 />
  </>
} 

const component2 = () => {
return <>
  <select>
    <option value="">Select a option</option>\
    <option value="2">Option 2</option> // It was added because it was the chosen option.
    </select>
  </>
}

Answer 1

如果您使用完全相同的选择，为什么不使用相同的组件并使用道具添加选项？类似于 onchange 的 first select setstate of selected option。然后在渲染第二个选择时将状态作为道具提供，例如 this.state.map(option=>{option})

Answer 2

您可以执行以下操作：

import React from "react";

const App = () => {
  const [options, setOptions] = React.useState([]);

  const Conponent2 = () => {
    return(
      <select>
        <option value="-1">Select a option</option>
        {
          options.map(el => <option value={el.value}>{el.text}</option>)
        }
      </select>
    )
  };

  const Conponent1 = ({onChange}) => {
    return(
      <>
      <select onChange={onChange}>
        <option value="-1">Select a option</option>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
      </select>

      <Conponent2 />
      </>
    )
  };
  
  const onChange = (e) => {
    setOptions([{
      value: e.target.value,
      text: e.target.options[e.target.selectedIndex].text,
    }])
  }

  return <Conponent1 onChange={onChange} />;
}

export default App;

如果您想保留之前选择的选项，您可以：

setOptions([...options, {
  value: e.target.value,
  text: e.target.options[e.target.selectedIndex].text,
}])

Answer 3

https://codesandbox.io/s/nice-cartwright-6zulx?file=/src/index.js:0-69

import { useState } from "react";
import "./styles.css";

const baseOptions = [
  {
    label: "option 1",
    value: "1"
  },
  {
    label: "option 2",
    value: "2"
  },
  {
    label: "option 3",
    value: "3"
  }
];

const Select = ({ options, onChange, value, disabledOptions = [] }) => (
  <select onChange={onChange} value={value}>
    <option disabled value="">
      select an option
    </option>
    {options.map((option, i) => (
      <option
        key={option.value}
        value={option.value}
        disabled={
          disabledOptions.findIndex((o) => o.value === option.value) !== -1
        }
      >
        {option.label}
      </option>
    ))}
  </select>
);

export default function App() {
  const [selectedOptions, setSelectedOptions] = useState([]);

  const [firstSelectValue, setFirstSelectValue] = useState("");
  const [secondSelectValue, setSecondSelectValue] = useState("");

  const handleFirstSelectChange = (e) => {
    const value = e.target.value;
    const option = baseOptions.find((o) => o.value === value);
    setSelectedOptions([...selectedOptions, option]);
    setFirstSelectValue(option.value);
  };

  const handleSecondSelectChange = (e) => {
    setSecondSelectValue(e.target.value);
  };
  return (
    <div className="App">
      <Select
        options={baseOptions}
        onChange={handleFirstSelectChange}
        value={firstSelectValue}
        disabledOptions={selectedOptions}
      />

      <Select
        options={selectedOptions}
        onChange={handleSecondSelectChange}
        value={secondSelectValue}
      />

      <div>Selected Value: {secondSelectValue}</div>
    </div>
  );
}

将所选选项从一个选择添加到 ReactJs 中的另一个选择

3 个答案: