在 ReactJs 中将所选选项从一个选择添加到另一个选择答案

【问题标题】：Add the selected option from one select to another select in ReactJs在 ReactJs 中将所选选项从一个选择添加到另一个选择
【发布时间】：2021-02-23 19:47:03
【问题描述】：

我在 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，所以这个选项必须添加到第二个组件的选择中。

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

【问题讨论】：

您必须将第一个 select 的选择存储到 component1 的状态，并将该值作为道具传递给 component2 并使用它来填充该选择。

标签： javascript reactjs

【解决方案1】：

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

【讨论】：

感谢您的帮助，我使用了带有 useState([]) 类型变量的箭头函数，将其作为 props 传递给组件，并且成功了！

【解决方案2】：

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

【讨论】：

在我刚刚给你的情况下只是一个例子，在我正在尝试做的事情中，有一个组件，其中包含其他几个等待你选择一个选项的选择，以便selected 选项作为选项添加到您的选择中。

【解决方案3】：

你可以这样做：

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,
}])

【讨论】：