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

Question

我有两个单选按钮：radio1 和 radio2，还有一个 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

编辑：

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

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

Answer 1

这里的主要问题是<option> 采用相同的key 值。当您选择radio2时，键变为2。然后您选择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>

Answer 2

您可以定义一个名为defaultValue 的新状态。因此，将select标签的value属性设置为defaultValue，就可以达到目的：

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

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