如何使依赖于其他输入的 select 输入始终在 React 中显示默认值？

Question

我有两个单选按钮：radio1 和 radio2，以及一个 select 输入。 Select 值取决于单选按钮。我想在 select radio1 时将 select 值设置为 1。我已经尝试将 defaultValue 和 value 设置为 select 输入，但每次我从 radio2 切换回 radio1 时，值总是设置为 2.

这是我的代码，非常感谢您的帮助：

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

const selectItems = {
  name: "size",
  fields: {
    radio1: [
      {
        value: "1"
      },
      {
        value: "2"
      }
    ],
    radio2: [
      {
        value: "2"
      },
      {
        value: "3"
      },
      {
        value: "4"
      }
    ]
  }
};

const App = () => {
  const [values, setValues] = useState({ radio: "radio1", select: "2" });
  const handleChange = (name, value) => {
    setValues((s) => {
      return { ...s, [name]: value };
    });
  };

  return (
    <div className="App">
      <h2>
        How do I make the Select always be '1' when Radio1 is selected after
        selecting Radio2?
      </h2>
      <input
        type="radio"
        id="radio1"
        value="radio1"
        name="radio"
        onChange={() => handleChange("radio", "radio1")}
      />
      <label htmlFor="radio1">Radio1</label>
      <input
        type="radio"
        id="radio2"
        value="radio2"
        name="radio"
        onChange={() => handleChange("radio", "radio2")}
      />
      <label htmlFor="radio2">Radio2</label>
      <br />
      <select
        id="size"
        name="size"
        onChange={(e) => handleChange("select", e.target.value)}
      >
        {selectItems.fields[values.radio].map(({ value }) => {
          return (
            <option key={value} value={value}>
              {value}
            </option>
          );
        })}
      </select>
    </div>
  );
};

export default App;

示例：https://codesandbox.io/s/goofy-danny-p1l3s?file=/src/App.js:0-1460

编辑：

根据一些答案的建议，我尝试将 'selected' 设置为 true。事实上，我以前试过这个，忘了在我的问题上提到它。这似乎有效，它在浏览器上给了我想要的效果，但后来我在控制台上收到这个错误：

Warning: Use the `defaultValue` or `value` props on <select> instead of setting `selected` on <option>.

Answer 1

元素 <option> 有属性 selected 负责确定当前选择的项目。那就是属性将帮助您决定在任何给定时间当前应该选择哪个项目。为了说明这一点，我在您的元素中添加了以下检查： <element selected={value === '1'}>，现在每次将收音机从 radio1 更改为 radio2 时，值都会更改为 1，如您在问题中所问。

我在这里的回答更像是一个指导，不要将其视为精确的分步说明，因为我没有想到您的程序可能工作或处理不同行为的任何其他方式。

Answer 2

您可以定义一个名为 defaultValue 的新状态。因此，通过 defaultValue 设置 select 标记的值属性，您可以实现您的目标：

const App = () => {
  const [values, setValues] = useState({ radio: "radio1", select: "2" });
  const [defaultValue, setDefaultValue] = useState(0);
  const handleChange = (name, value) => {
    setValues((s) => {
      return { ...s, [name]: value };
    });
  };

  useEffect(() => {
    setDefaultValue(selectItems.fields[values.radio][0].value);
  }, [values]);
  return (
    <div className="App">
      <h2>
        How do I make the Select always be '1' when Radio1 is selected after
        selecting Radio2?
      </h2>
      <input
        type="radio"
        id="radio1"
        value="radio1"
        name="radio"
        onChange={() => handleChange("radio", "radio1")}
      />
      <label for="radio1">Radio1</label>
      <input
        type="radio"
        id="radio2"
        value="radio2"
        name="radio"
        onChange={() => handleChange("radio", "radio2")}
      />
      <label for="radio2">Radio2</label>
      <br />
      <select
        id="size"
        name="size"
        value={defaultValue}
        onChange={(e) => handleChange("select", e.target.value)}
      >
        {selectItems.fields[values.radio].map(({ value }, index) => {
          return (
            <option key={value} value={value}>
              {value}
            </option>
          );
        })}
      </select>
    </div>
  );
};

export default App;

Answer 3

这里的主要问题是 <option> 取了相同的 key 值。当您选择 radio2 时，键变为 2.Then 您选择 radio1 并且 <select> 有 <option> 和 key=2。这就是 <select> 值不变的原因。证明是如果您将所有 <option> 值更改为唯一值，例如 radio1 {1, 2} 和 radio2 {3, 4, 5} 您的代码工作正常。

可能有多种解决方法，但解决此问题的正确方法是为每个 <option>.

设置唯一的 id

const selectItems = {
  name: "size",
  fields: {
    radio1: [
      {
        value: "1",
        id: 1
      },
      {
        value: "2",
        id: 2
      }
    ],
    radio2: [
      {
        value: "2",
        id: 3
      },
      {
        value: "3",
        id: 4
      },
      {
        value: "4",
        id: 5
      }
    ]
  }
};
------------------------------------------
<select
        id="size"
        name="size"
        onChange={(e) => handleChange("select", e.target.value)}
      >
        {selectItems.fields[values.radio].map(({ value, id }) => {
          return (
            <option key={id} value={value}>
              {value}
            </option>
          );
        })}
      </select>

如何使依赖于其他输入的 select 输入始终在 React 中显示默认值？

How to make a select input that is dependent on other inputs to always show a default value in React?

javascript

select

reactjs

use-state