如何将下拉列表中的选定选项绑定到功能组件中的 reactjs 状态属性并将其显示在下拉列表的一侧

Question

我是 React js 的新手。我已经编写了用于选择特定问题选项的代码。我只想在下拉列表旁边显示所选选项。但是当我选择该选项时，它会为所有问题显示相同的值。谁能帮我解决这个问题。

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

export default function App() {
  const [select, setSelect] = useState("");

  const optionchanged = (e) => {
    setSelect(e.target.value);
  };

  const questions = [
    {
      id: 1,
      qst: "which country you are from",
      options: ["select", "USA", "UK", "Australia", "India"]
    },
    {
      id: 2,
      qst: "What is your country code",
      options: ["select", "+1", "+44", "+61", "+91"]
    }
  ];
  return (
    <div className="App" style={{ "text-align": "left" }}>
      {questions.map((quest) => (
        <div>
          {/* displaying the question */}
          <p>
            {" "}
            {quest.id}. {quest.qst}
          </p>
          {/* showing the options */}
          <select onChange={optionchanged}>
            {quest.options.map((option) => (
              <>
                <option> {option}</option>
              </>
            ))}
          </select>
          {/* selected option showing next to the dropdown */}
          &nbsp;&nbsp;
          <span style={{ color: "blue" }}>{select} </span>
        </div>
      ))}
    </div>
  );
}



here is the output I got , here the second question also giving the same option without selecting it.
 

  [1]: https://i.stack.imgur.com/tFyu8.png

Answer 1

您需要为两个字段创建不同的状态变量。截至目前，两个字段值都存储为相同的状态。

Answer 2

您需要分别存储与每个 select 相关的值，为了实现您的目标，您可以定义不同的状态，或者您可以将值存储在对象而不是字符串中，如下所示：

function App() {
  const [select, setSelect] = React.useState({});

  const optionchanged = (e, id) => {
    setSelect( select => ({ ...select, [id]: e.target.value })  );
  };

  const questions = [
    {
      id: 1,
      qst: "which country you are from",
      options: ["select", "USA", "UK", "Australia", "India"]
    },
    {
      id: 2,
      qst: "What is your country code",
      options: ["select", "+1", "+44", "+61", "+91"]
    }
  ];
        
  return (
    <div className="App" style={{ "text-align": "left" }}>
      {questions.map((quest) => (
        <div>
          {/* displaying the question */}
          <p>
            {" "}
            {quest.id}. {quest.qst}
          </p>
          {/* showing the options */}
          <select onChange={e => optionchanged(e, quest.id)}>
            {quest.options.map((option) => (
                <option> {option}</option>
            ))}
          </select>
          {/* selected option showing next to the dropdown */}
          &nbsp;&nbsp;
          <span style={{ color: "blue" }}>{select[quest.id]} </span>
        </div>
      ))}
    </div>
  );
}

ReactDOM.render(<App/>, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="root"></div>

如何将下拉列表中的选定选项绑定到功能组件中的 reactjs 状态属性并将其显示在下拉列表的一侧

How to bind the selected option from the drop down to a reactjs state property in functional component and show it to side of the dropdown

javascript

reactjs

react-component

如何将下拉列表中的选定选项绑定到功能组件中的 reactjs 状态 属性 并将其显示在下拉列表的一侧

How to bind the selected option from the drop down to a reactjs state property in functional component and show it to side of the dropdown

javascript

reactjs

react-component

如何将下拉列表中的选定选项绑定到功能组件中的 reactjs 状态属性并将其显示在下拉列表的一侧